@@ -937,111 +465,6 @@ exports[`Article Links Block Mid Page Article Links Block it should match snapsh
}
.emotion-4 {
- padding: 0 1rem 1.5rem;
- margin: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- overflow-x: auto;
- width: 100%;
-}
-
-@media (min-width: 63rem) {
- .emotion-4 {
- margin: 0 -1rem;
- }
-}
-
-.emotion-5 {
- position: relative;
- background-color: #3A3C3E;
- padding: 1rem;
- -webkit-padding-end: 2.375rem;
- padding-inline-end: 2.375rem;
- height: auto;
- display: block;
- width: 100%;
-}
-
-.is-opera-mini .emotion-5 {
- position: relative;
- background-color: #E6E8EA;
- padding: 1rem;
- margin-bottom: 1rem;
- width: calc(100% - 0.5rem);
-}
-
-@media (min-width: 25rem) {
- .is-opera-mini .emotion-5 {
- width: calc(50% - 1rem);
- }
-}
-
-.emotion-6 {
- font-size: 0.9375rem;
- line-height: 1.25rem;
- font-family: ReithSerif,Helvetica,Arial,sans-serif;
- font-style: normal;
- font-weight: 700;
- display: inline-block;
- vertical-align: middle;
- -webkit-text-decoration: none;
- text-decoration: none;
- overflow-x: hidden;
- overflow-y: hidden;
- -webkit-line-clamp: 4;
- -webkit-box-orient: vertical;
- color: #F6F6F6;
-}
-
-@media (min-width: 20rem) and (max-width: 37.4375rem) {
- .emotion-6 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-@media (min-width: 37.5rem) {
- .emotion-6 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-.emotion-6:hover,
-.emotion-6:focus {
- -webkit-text-decoration: underline;
- text-decoration: underline;
-}
-
-.emotion-6:visited {
- color: #545658;
-}
-
-.emotion-6::before {
- bottom: 0;
- content: "";
- left: 0;
- overflow: hidden;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 1;
-}
-
-.emotion-7 {
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- inset-inline-end: 0.75rem;
- fill: currentColor;
-}
-
-.emotion-8 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
@@ -1068,19 +491,19 @@ exports[`Article Links Block Mid Page Article Links Block it should match snapsh
Skip content and continue reading
diff --git a/src/app/components/ArticleLinksBlock/index.module.scss b/src/app/components/ArticleLinksBlock/index.module.scss
new file mode 100644
index 00000000000..bcc4945025c
--- /dev/null
+++ b/src/app/components/ArticleLinksBlock/index.module.scss
@@ -0,0 +1,38 @@
+@use '@scss/themeTokens' as theme;
+
+.promoContainer {
+ padding: 0 #{theme.$spacings-double} #{theme.$spacings-triple};
+ margin: 0;
+ display: flex;
+ overflow-x: auto;
+ width: 100%;
+
+ @media (min-width: #{theme.$mediaQueries-group-4-min-width-bp}) {
+ margin: 0 -#{theme.$spacings-double};
+ }
+}
+
+.labelComponent {
+ @include theme.fontSizes-gel-font-size(brevier);
+ @include theme.fontVariants-gel-font-variant('sans-regular');
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: #{theme.$spacings-quadruple};
+ color: theme.$palette-shadow;
+ padding: 0 #{theme.$spacings-double};
+
+ @media #{theme.$mediaQueries-forced-colours} {
+ border: solid #{theme.pixelsToRem-px-to-rem(3)} transparent;
+ border-bottom: transparent;
+ }
+
+ @media (min-width: #{theme.$mediaQueries-group-4-min-width-bp}) {
+ padding: 0;
+ }
+
+ // Dark UI override
+ :global([data-is-dark-ui='true']) & {
+ color: theme.$palette-grey-2;
+ }
+}
diff --git a/src/app/components/ArticleLinksBlock/index.tsx b/src/app/components/ArticleLinksBlock/index.tsx
index 3ec5f20c2a6..60fd5bf8a2c 100644
--- a/src/app/components/ArticleLinksBlock/index.tsx
+++ b/src/app/components/ArticleLinksBlock/index.tsx
@@ -7,7 +7,7 @@ import SkipLinkWrapper from '#app/legacy/components/SkipLinkWrapper';
import { ServiceContext } from '../../contexts/ServiceContext';
import Promo from './Promo';
import PromoList from './PromoList';
-import styles from './index.styles';
+import styles from './index.module.scss';
interface ArticleLinksBlockProps {
blocks: OptimoBlock[];
@@ -76,7 +76,7 @@ const ArticleLinksBlock = ({
{typeof title === 'string' && title.length > 0 && (
@@ -84,7 +84,7 @@ const ArticleLinksBlock = ({
)}
{isSingleItem ? (
-
+
) : (
diff --git a/src/app/components/Curation/Subhead/index.module.scss b/src/app/components/Curation/Subhead/index.module.scss
new file mode 100644
index 00000000000..06e6b7a40eb
--- /dev/null
+++ b/src/app/components/Curation/Subhead/index.module.scss
@@ -0,0 +1,40 @@
+@use '@scss/themeTokens' as theme;
+
+.h2 {
+ @include theme.fontVariants-gel-font-variant('sans-bold');
+ @include theme.fontSizes-gel-font-size(doublePica);
+ color: theme.$palette-grey-10;
+
+ a {
+ display: inline-block;
+ color: theme.$palette-grey-10;
+ text-decoration: none;
+ }
+
+ span {
+ display: inline-block;
+ position: relative;
+ }
+
+ a:visited {
+ color: theme.$palette-grey-10;
+ }
+
+ a:hover, a:focus {
+ color: theme.$palette-postbox;
+
+ span {
+ text-decoration: underline;
+ }
+ }
+
+ svg {
+ margin-inline-start: 0.5rem;
+ fill: currentColor;
+ width: calc(14 / 16) * 1rem;
+ height: calc(14 / 16) * 1rem;
+ position: relative;
+ }
+}
+
+
diff --git a/src/app/components/Curation/Subhead/index.tsx b/src/app/components/Curation/Subhead/index.tsx
index d3807c956dc..22f66531eee 100644
--- a/src/app/components/Curation/Subhead/index.tsx
+++ b/src/app/components/Curation/Subhead/index.tsx
@@ -1,7 +1,5 @@
import { Fragment, PropsWithChildren, use } from 'react';
-
-import styles from './index.styles';
-
+import styles from './index.module.scss';
import { LeftChevron, RightChevron } from '../../icons';
import { ServiceContext } from '../../../contexts/ServiceContext';
@@ -32,7 +30,7 @@ const Subhead = ({
)
: Fragment;
return (
-
+
{children}
);
diff --git a/src/app/components/ThemeProviderSCSSModules/chameleonLogos/index.tsx b/src/app/components/ThemeProviderSCSSModules/chameleonLogos/index.tsx
new file mode 100644
index 00000000000..7417b4d9a16
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/chameleonLogos/index.tsx
@@ -0,0 +1,31 @@
+import { BrandSVG } from '../../../models/types/theming';
+
+// Chameleon logos have an additional margin on their viewbox
+const buildLogo = ({ width, height, group, viewbox }: BrandSVG) => {
+ const margin = 140;
+
+ const croppedWidth = (width || 0) - 2 * margin;
+ const croppedHeight = (height || 0) - 2 * margin;
+
+ return {
+ group: (
+
+ {group}
+
+ ),
+ ratio: croppedWidth / croppedHeight,
+ viewbox: viewbox || {
+ minX: margin,
+ minY: margin,
+ width: croppedWidth,
+ height: croppedHeight,
+ },
+ };
+};
+
+export default buildLogo;
diff --git a/src/app/components/ThemeProviderSCSSModules/chameleonLogos/mundo.tsx b/src/app/components/ThemeProviderSCSSModules/chameleonLogos/mundo.tsx
new file mode 100644
index 00000000000..03a0b25441d
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/chameleonLogos/mundo.tsx
@@ -0,0 +1,9 @@
+import build from '.';
+
+export default build({
+ width: 1738,
+ height: 425,
+ group: (
+
+ ),
+});
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/fontBaseUrl.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/fontBaseUrl.scss
new file mode 100644
index 00000000000..8982e34398c
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/fontBaseUrl.scss
@@ -0,0 +1,4 @@
+$font-base-url: 'https://static.files.bbci.co.uk/ws/simorgh-assets/public';
+$reith-base-url: 'https://static.files.bbci.co.uk/fonts/';
+$reith-fonts-dir: $reith-base-url + 'reith/r2.512/';
+$reith-qalam-fonts-dir: $reith-base-url + 'reith-qalam/1.310/';
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/fontBaseUrls.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/fontBaseUrls.scss
new file mode 100644
index 00000000000..8982e34398c
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/fontBaseUrls.scss
@@ -0,0 +1,4 @@
+$font-base-url: 'https://static.files.bbci.co.uk/ws/simorgh-assets/public';
+$reith-base-url: 'https://static.files.bbci.co.uk/fonts/';
+$reith-fonts-dir: $reith-base-url + 'reith/r2.512/';
+$reith-qalam-fonts-dir: $reith-base-url + 'reith-qalam/1.310/';
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-ethiopic-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-ethiopic-bold.scss
new file mode 100644
index 00000000000..5532c863e27
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-ethiopic-bold.scss
@@ -0,0 +1,15 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Sans Ethiopic';
+ font-weight: 700;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/bold.woff')
+ format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/bold.eot')
+ format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/bold.ttf')
+ format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-ethiopic-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-ethiopic-regular.scss
new file mode 100644
index 00000000000..d41a855b28c
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-ethiopic-regular.scss
@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Sans Ethiopic';
+ font-weight: 400;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/normal.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/normal.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/normal.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-gujarati-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-gujarati-bold.scss
new file mode 100644
index 00000000000..dc4b9c9dc0e
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-gujarati-bold.scss
@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Sans Gujarati';
+ font-weight: 700;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/bold.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/bold.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/bold.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-gujarati-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-gujarati-regular.scss
new file mode 100644
index 00000000000..1ffe4375077
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-gujarati-regular.scss
@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Sans Gujarati';
+ font-weight: 400;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/normal.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/normal.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/normal.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-tamil-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-tamil-bold.scss
new file mode 100644
index 00000000000..2c1d74d873b
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-tamil-bold.scss
@@ -0,0 +1,13 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Sans Tamil';
+ font-weight: 700;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/bold.woff2') format('woff2'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/bold.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/bold.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-tamil-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-tamil-regular.scss
new file mode 100644
index 00000000000..275fdeeb1df
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-tamil-regular.scss
@@ -0,0 +1,13 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Sans Tamil';
+ font-weight: 400;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.woff2') format('woff2'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-telugu-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-telugu-bold.scss
new file mode 100644
index 00000000000..6f98de8cd3e
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-telugu-bold.scss
@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Sans Telugu';
+ font-weight: 700;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/bold.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/bold.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/bold.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-telugu-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-telugu-regular.scss
new file mode 100644
index 00000000000..228b7763ce9
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-telugu-regular.scss
@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Sans Telugu';
+ font-weight: 400;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/normal.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/normal.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/normal.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-serif-sinhala-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-serif-sinhala-bold.scss
new file mode 100644
index 00000000000..5c56acabb31
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-serif-sinhala-bold.scss
@@ -0,0 +1,13 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Serif Sinhala';
+ font-weight: 700;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSerifSinhala/v1.00/bold.woff2') format('woff2'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSerifSinhala/v1.00/bold.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSerifSinhala/v1.00/bold.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSerifSinhala/v1.00/bold.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-serif-sinhala-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-serif-sinhala-regular.scss
new file mode 100644
index 00000000000..fafc57c100b
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/noto-serif-sinhala-regular.scss
@@ -0,0 +1,13 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Noto Serif Sinhala';
+ font-weight: 400;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/NotoSerifSinhala/v1.00/normal.woff2') format('woff2'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSerifSinhala/v1.00/normal.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSerifSinhala/v1.00/normal.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/NotoSerifSinhala/v1.00/normal.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/padauk-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/padauk-bold.scss
new file mode 100644
index 00000000000..adbb2415c89
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/padauk-bold.scss
@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Padauk';
+ font-weight: 700;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/Padauk/v2.8/bold.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/Padauk/v2.8/bold.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/Padauk/v2.8/bold.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/padauk-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/padauk-regular.scss
new file mode 100644
index 00000000000..a8116c3d0ef
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/padauk-regular.scss
@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'Padauk';
+ font-weight: 400;
+ font-style: normal;
+ src:
+ url('#{fontUrls.$font-base-url}/fonts/Padauk/v2.8/normal.woff') format('woff'),
+ url('#{fontUrls.$font-base-url}/fonts/Padauk/v2.8/normal.eot') format('eot'),
+ url('#{fontUrls.$font-base-url}/fonts/Padauk/v2.8/normal.ttf') format('ttf');
+ font-display: swap;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-bold.scss
new file mode 100644
index 00000000000..60453b47e89
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-bold.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'ReithSans';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_Bd.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_Bd.woff') format('woff');
+ font-weight: 700;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-condensed-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-condensed-bold.scss
new file mode 100644
index 00000000000..02a5dfc7227
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-condensed-bold.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSansCd';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSansCd_W_Bd.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSansCd_W_Bd.woff') format('woff');
+ font-weight: 700;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-condensed-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-condensed-regular.scss
new file mode 100644
index 00000000000..67eca24ae5b
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-condensed-regular.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSansCd';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSansCd_W_Rg.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSansCd_W_Rg.woff') format('woff');
+ font-weight: 400;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-extra-bold-italic.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-extra-bold-italic.scss
new file mode 100644
index 00000000000..3f1764249fe
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-extra-bold-italic.scss
@@ -0,0 +1,11 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSans';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_ExBdIt.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_ExBdIt.woff') format('woff');
+ font-weight: 800;
+ font-style: italic;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-extra-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-extra-bold.scss
new file mode 100644
index 00000000000..5ad743ff7a7
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-extra-bold.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSans';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_ExBd.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_ExBd.woff') format('woff');
+ font-weight: 800;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-light-italic.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-light-italic.scss
new file mode 100644
index 00000000000..da241de839d
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-light-italic.scss
@@ -0,0 +1,11 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSans';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_LtIt.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_LtIt.woff') format('woff');
+ font-weight: 300;
+ font-style: italic;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-light.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-light.scss
new file mode 100644
index 00000000000..9bd68578b5d
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-light.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSans';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_Lt.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_Lt.woff') format('woff');
+ font-weight: 300;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-medium.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-medium.scss
new file mode 100644
index 00000000000..be413ba6e52
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-medium.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSans';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_Md.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_Md.woff') format('woff');
+ font-weight: 500;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-regular.scss
new file mode 100644
index 00000000000..be4126edda6
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-sans-regular.scss
@@ -0,0 +1,9 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'ReithSans';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_Rg.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSans_W_Rg.woff') format('woff');
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-bold.scss
new file mode 100644
index 00000000000..73653676c1f
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-bold.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSerif';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSerif_W_Bd.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSerif_W_Bd.woff') format('woff');
+ font-weight: 700;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-extra-bold.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-extra-bold.scss
new file mode 100644
index 00000000000..6e94ff0b206
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-extra-bold.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSerif';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSerif_W_ExBd.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSerif_W_ExBd.woff') format('woff');
+ font-weight: 800;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-light.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-light.scss
new file mode 100644
index 00000000000..653f587f059
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-light.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'ReithSerif';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}subsets/BBCReithSerif_WNumbers_Lt.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}subsets/BBCReithSerif_WNumbers_Lt.woff') format('woff');
+ font-weight: 300;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-medium.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-medium.scss
new file mode 100644
index 00000000000..d8628316728
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-medium.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+ font-family: 'ReithSerif';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSerif_W_Md.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSerif_W_Md.woff') format('woff');
+ font-weight: 500;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-regular.scss b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-regular.scss
new file mode 100644
index 00000000000..0eaa3047353
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFaces/reith-serif-regular.scss
@@ -0,0 +1,10 @@
+@use './fontBaseUrls.scss' as fontUrl;
+
+@font-face {
+ font-family: 'ReithSerif';
+ src:
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSerif_W_Rg.woff2') format('woff2'),
+ url('#{fontUrls.$reith-fonts-dir}BBCReithSerif_W_Rg.woff') format('woff');
+ font-weight: 400;
+ font-display: optional;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontFamilies.scss b/src/app/components/ThemeProviderSCSSModules/fontFamilies.scss
new file mode 100644
index 00000000000..95540418753
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontFamilies.scss
@@ -0,0 +1,39 @@
+// fontFamilies.scss
+// SCSS variables for font-family stacks, matching fontFamilies.ts
+// Usage: font-family: $reith-sans;
+
+$apple-sd-gothic-pro:
+ 'Apple SD Gothic Neo', AppleGothic, 'Malgun Gothic', Dotum,
+ 'Noto Sans CJK KR', sans-serif;
+$arial: Arial, Verdana, Geneva, Helvetica, sans-serif;
+$helmet: Helmet, Freesans, Helvetica, Arial, sans-serif;
+$helvetica-chinese:
+ Helvetica, Arial, STHeiti, 华文黑体, 'Microsoft YaHei', 微软雅黑, SimSun, 宋体;
+$hiragino-kagu-gothic-pro:
+ 'Hiragino Kaku Gothic Pro', 'ﾋﾗギﾉ角ゴPro W3', 'MS PGothic', 'MS UI Gothic',
+ Helvetica, Arial, sans-serif;
+$noto-sans-telugu:
+ 'Noto Sans Telugu', 'Hind Guntur', Gautami, 'Kohinoor Telugu', sans-serif;
+$noto-sans-gujarati:
+ 'Noto Sans Gujarati', Rasa, 'Hind vadodara', Shruti, Gautami,
+ 'Gujarati Sangam MN', 'Gujarati MT', sans-serif;
+$noto-sans-bengali:
+ 'Noto Serif Bengali', Helmet, Freesans, Helvetica, Arial, sans-serif;
+$noto-sans-devanagari:
+ 'Noto Sans Devanagari', Hind, 'Mukta Vaani', Gautami, 'Kohinoor Devanagari',
+ sans-serif;
+$noto-sans-ethiopic:
+ 'Noto Sans Ethiopic', Arial, Verdana, Geneva, Helvetica, sans-serif;
+$noto-sans-gurmukhi:
+ 'Noto Sans Gurmukhi', Gautami, 'Kohinoor Gurmukhi', sans-serif;
+$noto-sans-sinhala:
+ 'Noto Serif Sinhala', Arial, Verdana, Geneva, Helvetica, sans-serif;
+$noto-sans-tamil:
+ 'Noto Sans Tamil', Helmet, Freesans, Helvetica, Arial, sans-serif;
+$padauk: Padauk, Arial, Verdana, Geneva, Helvetica, sans-serif;
+$reith-sans: ReithSans, Helvetica, Arial, sans-serif;
+$reith-serif: ReithSerif, Helvetica, Arial, sans-serif;
+$reith-qalam:
+ 'BBC Reith Qalam', 'Times New Roman', Arial, Verdana, Geneva, Helvetica,
+ sans-serif;
+$tahoma: Tahoma, Helmet, freesans, Helvetica, Arial, sans-serif;
diff --git a/src/app/components/ThemeProviderSCSSModules/fontMediaQueries.scss b/src/app/components/ThemeProviderSCSSModules/fontMediaQueries.scss
new file mode 100644
index 00000000000..bf98f551b9f
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontMediaQueries.scss
@@ -0,0 +1,18 @@
+
+// fontMediaQueries.scss
+// SCSS variables for font media query breakpoints, matching fontMediaQueries.ts
+// These are static values representing only the media query condition (no @media, no quotes).
+
+@use './px-to-rem' as *;
+
+
+$group-a-max-width: '(max-width: #{px-to-rem(319)})'; // 319px
+$group-b-max-width: '(max-width: #{px-to-rem(599)})'; // 599px
+$group-b-min-width: '(min-width: #{px-to-rem(320)})'; // 320px
+$group-b-only: '(min-width: #{px-to-rem(320)}) and (max-width: #{px-to-rem(599)})'; // 320px - 599px
+$group-d-min-width: '(min-width: #{px-to-rem(600)})'; // 600px
+
+// Usage example:
+// @media #{$group-b-only} { ... }
+// or
+// @media #{$group-d-min-width} { ... }
diff --git a/src/app/components/ThemeProviderSCSSModules/fontScripts/latinWithDiacritics.scss b/src/app/components/ThemeProviderSCSSModules/fontScripts/latinWithDiacritics.scss
new file mode 100644
index 00000000000..17fd9730e2a
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontScripts/latinWithDiacritics.scss
@@ -0,0 +1,107 @@
+@use '../px-to-rem.scss' as *;
+:root {
+ --font-size-atlas-group-a: #{px-to-rem(78)};
+ --line-height-atlas-group-a: #{px-to-rem(84)};
+ --font-size-atlas-group-b: #{px-to-rem(96)};
+ --line-height-atlas-group-b: #{px-to-rem(104)};
+ --font-size-atlas-group-d: #{px-to-rem(140)};
+ --line-height-atlas-group-d: #{px-to-rem(148)};
+
+ --font-size-elephant-group-a: #{px-to-rem(60)};
+ --line-height-elephant-group-a: #{px-to-rem(64)};
+ --font-size-elephant-group-b: #{px-to-rem(78)};
+ --line-height-elephant-group-b: #{px-to-rem(84)};
+ --font-size-elephant-group-d: #{px-to-rem(116)};
+ --line-height-elephant-group-d: #{px-to-rem(124)};
+
+ --font-size-imperial-group-a: #{px-to-rem(50)};
+ --line-height-imperial-group-a: #{px-to-rem(54)};
+ --font-size-imperial-group-b: #{px-to-rem(64)};
+ --line-height-imperial-group-b: #{px-to-rem(78)};
+ --font-size-imperial-group-d: #{px-to-rem(96)};
+ --line-height-imperial-group-d: #{px-to-rem(116)};
+
+ --font-size-royal-group-a: #{px-to-rem(40)};
+ --line-height-royal-group-a: #{px-to-rem(44)};
+ --font-size-royal-group-b: #{px-to-rem(52)};
+ --line-height-royal-group-b: #{px-to-rem(64)};
+ --font-size-royal-group-d: #{px-to-rem(76)};
+ --line-height-royal-group-d: #{px-to-rem(92)};
+
+ --font-size-foolscap-group-a: #{px-to-rem(32)};
+ --line-height-foolscap-group-a: #{px-to-rem(36)};
+ --font-size-foolscap-group-b: #{px-to-rem(40)};
+ --line-height-foolscap-group-b: #{px-to-rem(48)};
+ --font-size-foolscap-group-d: #{px-to-rem(56)};
+ --line-height-foolscap-group-d: #{px-to-rem(68)};
+
+ --font-size-canon-group-a: #{px-to-rem(28)};
+ --line-height-canon-group-a: #{px-to-rem(36)};
+ --font-size-canon-group-b: #{px-to-rem(32)};
+ --line-height-canon-group-b: #{px-to-rem(42)};
+ --font-size-canon-group-d: #{px-to-rem(44)};
+ --line-height-canon-group-d: #{px-to-rem(58)};
+
+ --font-size-trafalgar-group-a: #{px-to-rem(22)};
+ --line-height-trafalgar-group-a: #{px-to-rem(28)};
+ --font-size-trafalgar-group-b: #{px-to-rem(24)};
+ --line-height-trafalgar-group-b: #{px-to-rem(32)};
+ --font-size-trafalgar-group-d: #{px-to-rem(32)};
+ --line-height-trafalgar-group-d: #{px-to-rem(42)};
+
+ --font-size-paragon-group-a: #{px-to-rem(20)};
+ --line-height-paragon-group-a: #{px-to-rem(26)};
+ --font-size-paragon-group-b: #{px-to-rem(22)};
+ --line-height-paragon-group-b: #{px-to-rem(30)};
+ --font-size-paragon-group-d: #{px-to-rem(28)};
+ --line-height-paragon-group-d: #{px-to-rem(38)};
+
+ --font-size-double-pica-group-a: #{px-to-rem(18)};
+ --line-height-double-pica-group-a: #{px-to-rem(24)};
+ --font-size-double-pica-group-b: #{px-to-rem(20)};
+ --line-height-double-pica-group-b: #{px-to-rem(26)};
+ --font-size-double-pica-group-d: #{px-to-rem(24)};
+ --line-height-double-pica-group-d: #{px-to-rem(32)};
+
+ --font-size-great-primer-group-a: #{px-to-rem(18)};
+ --line-height-great-primer-group-a: #{px-to-rem(22)};
+ --font-size-great-primer-group-b: #{px-to-rem(18)};
+ --line-height-great-primer-group-b: #{px-to-rem(22)};
+ --font-size-great-primer-group-d: #{px-to-rem(20)};
+ --line-height-great-primer-group-d: #{px-to-rem(24)};
+
+ --font-size-body-copy-group-a: #{px-to-rem(15)};
+ --line-height-body-copy-group-a: #{px-to-rem(20)};
+ --font-size-body-copy-group-b: #{px-to-rem(16)};
+ --line-height-body-copy-group-b: #{px-to-rem(22)};
+ --font-size-body-copy-group-d: #{px-to-rem(16)};
+ --line-height-body-copy-group-d: #{px-to-rem(22)};
+
+ --font-size-pica-group-a: #{px-to-rem(15)};
+ --line-height-pica-group-a: #{px-to-rem(20)};
+ --font-size-pica-group-b: #{px-to-rem(16)};
+ --line-height-pica-group-b: #{px-to-rem(20)};
+ --font-size-pica-group-d: #{px-to-rem(16)};
+ --line-height-pica-group-d: #{px-to-rem(20)};
+
+ --font-size-long-primer-group-a: #{px-to-rem(15)};
+ --line-height-long-primer-group-a: #{px-to-rem(20)};
+ --font-size-long-primer-group-b: #{px-to-rem(15)};
+ --line-height-long-primer-group-b: #{px-to-rem(20)};
+ --font-size-long-primer-group-d: #{px-to-rem(14)};
+ --line-height-long-primer-group-d: #{px-to-rem(18)};
+
+ --font-size-brevier-group-a: #{px-to-rem(14)};
+ --line-height-brevier-group-a: #{px-to-rem(18)};
+ --font-size-brevier-group-b: #{px-to-rem(14)};
+ --line-height-brevier-group-b: #{px-to-rem(18)};
+ --font-size-brevier-group-d: #{px-to-rem(13)};
+ --line-height-brevier-group-d: #{px-to-rem(16)};
+
+ --font-size-minion-group-a: #{px-to-rem(12)};
+ --line-height-minion-group-a: #{px-to-rem(16)};
+ --font-size-minion-group-b: #{px-to-rem(12)};
+ --line-height-minion-group-b: #{px-to-rem(16)};
+ --font-size-minion-group-d: #{px-to-rem(12)};
+ --line-height-minion-group-d: #{px-to-rem(16)};
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontSizes.scss b/src/app/components/ThemeProviderSCSSModules/fontSizes.scss
new file mode 100644
index 00000000000..ef33e702ed4
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontSizes.scss
@@ -0,0 +1,246 @@
+// fontSizes.scss
+// SCSS map-based approach for font sizes and line heights, referencing global CSS custom properties
+// Assumes that the following custom properties are set globally, e.g. in :root or a theme provider:
+// --font-size-atlas-group-a, --line-height-atlas-group-a, etc.
+
+
+@use "sass:map";
+@use './fontMediaQueries.scss' as fontMediaQueries;
+
+$font-sizes: (
+ atlas: (
+ groupA: (
+ font-size: var(--font-size-atlas-group-a),
+ line-height: var(--line-height-atlas-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-atlas-group-b),
+ line-height: var(--line-height-atlas-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-atlas-group-d),
+ line-height: var(--line-height-atlas-group-d),
+ ),
+ ),
+ elephant: (
+ groupA: (
+ font-size: var(--font-size-elephant-group-a),
+ line-height: var(--line-height-elephant-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-elephant-group-b),
+ line-height: var(--line-height-elephant-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-elephant-group-d),
+ line-height: var(--line-height-elephant-group-d),
+ ),
+ ),
+ imperial: (
+ groupA: (
+ font-size: var(--font-size-imperial-group-a),
+ line-height: var(--line-height-imperial-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-imperial-group-b),
+ line-height: var(--line-height-imperial-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-imperial-group-d),
+ line-height: var(--line-height-imperial-group-d),
+ ),
+ ),
+ royal: (
+ groupA: (
+ font-size: var(--font-size-royal-group-a),
+ line-height: var(--line-height-royal-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-royal-group-b),
+ line-height: var(--line-height-royal-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-royal-group-d),
+ line-height: var(--line-height-royal-group-d),
+ ),
+ ),
+ foolscap: (
+ groupA: (
+ font-size: var(--font-size-foolscap-group-a),
+ line-height: var(--line-height-foolscap-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-foolscap-group-b),
+ line-height: var(--line-height-foolscap-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-foolscap-group-d),
+ line-height: var(--line-height-foolscap-group-d),
+ ),
+ ),
+ canon: (
+ groupA: (
+ font-size: var(--font-size-canon-group-a),
+ line-height: var(--line-height-canon-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-canon-group-b),
+ line-height: var(--line-height-canon-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-canon-group-d),
+ line-height: var(--line-height-canon-group-d),
+ ),
+ ),
+ trafalgar: (
+ groupA: (
+ font-size: var(--font-size-trafalgar-group-a),
+ line-height: var(--line-height-trafalgar-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-trafalgar-group-b),
+ line-height: var(--line-height-trafalgar-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-trafalgar-group-d),
+ line-height: var(--line-height-trafalgar-group-d),
+ ),
+ ),
+ paragon: (
+ groupA: (
+ font-size: var(--font-size-paragon-group-a),
+ line-height: var(--line-height-paragon-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-paragon-group-b),
+ line-height: var(--line-height-paragon-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-paragon-group-d),
+ line-height: var(--line-height-paragon-group-d),
+ ),
+ ),
+ doublePica: (
+ groupA: (
+ font-size: var(--font-size-double-pica-group-a),
+ line-height: var(--line-height-double-pica-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-double-pica-group-b),
+ line-height: var(--line-height-double-pica-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-double-pica-group-d),
+ line-height: var(--line-height-double-pica-group-d),
+ ),
+ ),
+ greatPrimer: (
+ groupA: (
+ font-size: var(--font-size-great-primer-group-a),
+ line-height: var(--line-height-great-primer-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-great-primer-group-b),
+ line-height: var(--line-height-great-primer-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-great-primer-group-d),
+ line-height: var(--line-height-great-primer-group-d),
+ ),
+ ),
+ bodyCopy: (
+ groupA: (
+ font-size: var(--font-size-body-copy-group-a),
+ line-height: var(--line-height-body-copy-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-body-copy-group-b),
+ line-height: var(--line-height-body-copy-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-body-copy-group-d),
+ line-height: var(--line-height-body-copy-group-d),
+ ),
+ ),
+ pica: (
+ groupA: (
+ font-size: var(--font-size-pica-group-a),
+ line-height: var(--line-height-pica-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-pica-group-b),
+ line-height: var(--line-height-pica-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-pica-group-d),
+ line-height: var(--line-height-pica-group-d),
+ ),
+ ),
+ longPrimer: (
+ groupA: (
+ font-size: var(--font-size-long-primer-group-a),
+ line-height: var(--line-height-long-primer-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-long-primer-group-b),
+ line-height: var(--line-height-long-primer-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-long-primer-group-d),
+ line-height: var(--line-height-long-primer-group-d),
+ ),
+ ),
+ brevier: (
+ groupA: (
+ font-size: var(--font-size-brevier-group-a),
+ line-height: var(--line-height-brevier-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-brevier-group-b),
+ line-height: var(--line-height-brevier-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-brevier-group-d),
+ line-height: var(--line-height-brevier-group-d),
+ ),
+ ),
+ minion: (
+ groupA: (
+ font-size: var(--font-size-minion-group-a),
+ line-height: var(--line-height-minion-group-a),
+ ),
+ groupB: (
+ font-size: var(--font-size-minion-group-b),
+ line-height: var(--line-height-minion-group-b),
+ ),
+ groupD: (
+ font-size: var(--font-size-minion-group-d),
+ line-height: var(--line-height-minion-group-d),
+ ),
+ ),
+);
+
+
+// Responsive gel-font-size mixin: infers group from media queries
+@mixin gel-font-size($scale) {
+ // Group A: up to 319px
+ $values: map.get(map.get($font-sizes, $scale), groupA);
+ font-size: map.get($values, font-size);
+ line-height: map.get($values, line-height);
+ // Group B: 320px - 599px
+ @media #{fontMediaQueries.$group-b-only} {
+ $values: map.get(map.get($font-sizes, $scale), groupB);
+ font-size: map.get($values, font-size);
+ line-height: map.get($values, line-height);
+ }
+ // Group D: 600px+
+ @media #{fontMediaQueries.$group-d-min-width} {
+ $values: map.get(map.get($font-sizes, $scale), groupD);
+ font-size: map.get($values, font-size);
+ line-height: map.get($values, line-height);
+ }
+}
+
+// Usage:
+// .headline { @include gel-font-size(atlas); }
+// This will apply font size and line height responsively by group using media queries.
diff --git a/src/app/components/ThemeProviderSCSSModules/fontVariants.scss b/src/app/components/ThemeProviderSCSSModules/fontVariants.scss
new file mode 100644
index 00000000000..7485b8fc1c3
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontVariants.scss
@@ -0,0 +1,87 @@
+// Utility mixins for font variant fallbacks
+@mixin get-sans-regular {
+ font-family: var(--sans-regular-font-family);
+ font-style: var(--sans-regular-font-style);
+ font-weight: var(--sans-regular-font-weight);
+}
+
+@mixin get-sans-regular-italic {
+ font-family: var(--sans-regular-italic-font-family, var(--sans-regular-font-family));
+ font-style: var(--sans-regular-italic-font-style, var(--sans-regular-font-style));
+ font-weight: var(--sans-regular-italic-font-weight, var(--sans-regular-font-weight));
+}
+
+@mixin get-sans-bold {
+ font-family: var(--sans-bold-font-family, var(--sans-regular-font-family));
+ font-style: var(--sans-bold-font-style, var(--sans-regular-font-style));
+ font-weight: var(--sans-bold-font-weight, var(--sans-regular-font-weight));
+}
+
+@mixin get-sans-bold-italic {
+ font-family: var(--sans-bold-italic-font-family, var(--sans-bold-font-family, var(--sans-regular-font-family)));
+ font-style: var(--sans-bold-italic-font-style, var(--sans-bold-font-style, var(--sans-regular-font-style)));
+ font-weight: var(--sans-bold-italic-font-weight, var(--sans-bold-font-weight, var(--sans-regular-font-weight)));
+}
+
+@mixin get-sans-light {
+ font-family: var(--sans-light-font-family, var(--sans-regular-font-family));
+ font-style: var(--sans-light-font-style, var(--sans-regular-font-style));
+ font-weight: var(--sans-light-font-weight, var(--sans-regular-font-weight));
+}
+
+@mixin get-serif-regular {
+ font-family: var(--serif-regular-font-family, var(--serif-medium-font-family, var(--sans-regular-font-family)));
+ font-style: var(--serif-regular-font-style, var(--serif-medium-font-style, var(--sans-regular-font-style)));
+ font-weight: var(--serif-regular-font-weight, var(--serif-medium-font-weight, var(--sans-regular-font-weight)));
+}
+
+@mixin get-serif-medium {
+ font-family: var(--serif-medium-font-family, var(--sans-bold-font-family, var(--sans-regular-font-family)));
+ font-style: var(--serif-medium-font-style, var(--sans-bold-font-style, var(--sans-regular-font-style)));
+ font-weight: var(--serif-medium-font-weight, var(--sans-bold-font-weight, var(--sans-regular-font-weight)));
+}
+
+@mixin get-serif-medium-italic {
+ font-family: var(--serif-medium-italic-font-family, var(--sans-bold-italic-font-family, var(--sans-bold-font-family, var(--sans-regular-font-family))));
+ font-style: var(--serif-medium-italic-font-style, var(--sans-bold-italic-font-style, var(--sans-bold-font-style, var(--sans-regular-font-style))));
+ font-weight: var(--serif-medium-italic-font-weight, var(--sans-bold-italic-font-weight, var(--sans-bold-font-weight, var(--sans-regular-font-weight))));
+}
+
+@mixin get-serif-bold {
+ font-family: var(--serif-bold-font-family, var(--sans-bold-font-family, var(--sans-regular-font-family)));
+ font-style: var(--serif-bold-font-style, var(--sans-bold-font-style, var(--sans-regular-font-style)));
+ font-weight: var(--serif-bold-font-weight, var(--sans-bold-font-weight, var(--sans-regular-font-weight)));
+}
+
+@mixin get-serif-light {
+ font-family: var(--serif-light-font-family, var(--serif-medium-font-family, var(--sans-regular-font-family)));
+ font-style: var(--serif-light-font-style, var(--serif-medium-font-style, var(--sans-regular-font-style)));
+ font-weight: var(--serif-light-font-weight, var(--serif-medium-font-weight, var(--sans-regular-font-weight)));
+}
+
+// Main mixin
+@mixin gel-font-variant($variant) {
+ @if $variant == 'sans-regular' {
+ @include get-sans-regular;
+ } @else if $variant == 'sans-regular-italic' {
+ @include get-sans-regular-italic;
+ } @else if $variant == 'sans-bold' {
+ @include get-sans-bold;
+ } @else if $variant == 'sans-bold-italic' {
+ @include get-sans-bold-italic;
+ } @else if $variant == 'sans-light' {
+ @include get-sans-light;
+ } @else if $variant == 'serif-regular' {
+ @include get-serif-regular;
+ } @else if $variant == 'serif-medium' {
+ @include get-serif-medium;
+ } @else if $variant == 'serif-medium-italic' {
+ @include get-serif-medium-italic;
+ } @else if $variant == 'serif-bold' {
+ @include get-serif-bold;
+ } @else if $variant == 'serif-light' {
+ @include get-serif-light;
+ } @else {
+ @include get-sans-regular;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/ThemeProviderSCSSModules/fontVariants/amharic.scss b/src/app/components/ThemeProviderSCSSModules/fontVariants/amharic.scss
new file mode 100644
index 00000000000..81668261b94
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontVariants/amharic.scss
@@ -0,0 +1,10 @@
+:root {
+ --sans-regular-font-family:
+ 'Noto Sans Ethiopic', Arial, Verdana, Geneva, Helvetica, sans-serif;
+ --sans-regular-font-style: normal;
+ --sans-regular-font-weight: 400;
+ --sans-bold-font-family:
+ 'Noto Sans Ethiopic', Arial, Verdana, Geneva, Helvetica, sans-serif;
+ --sans-bold-font-style: normal;
+ --sans-bold-font-weight: 700;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/fontVariants/reith.scss b/src/app/components/ThemeProviderSCSSModules/fontVariants/reith.scss
new file mode 100644
index 00000000000..22deca4b3dc
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/fontVariants/reith.scss
@@ -0,0 +1,32 @@
+:root {
+ --sans-regular-font-family: 'ReithSans', Helvetica, Arial, sans-serif;
+ --sans-regular-font-style: normal;
+ --sans-regular-font-weight: 400;
+ --sans-regular-italic-font-family: 'ReithSans', Helvetica, Arial, sans-serif;
+ --sans-regular-italic-font-style: italic;
+ --sans-regular-italic-font-weight: 400;
+ --sans-bold-font-family: 'ReithSans', Helvetica, Arial, sans-serif;
+ --sans-bold-font-style: normal;
+ --sans-bold-font-weight: 700;
+ --sans-bold-italic-font-family: 'ReithSans', Helvetica, Arial, sans-serif;
+ --sans-bold-italic-font-style: italic;
+ --sans-bold-italic-font-weight: 700;
+ --sans-light-font-family: 'ReithSans', Helvetica, Arial, sans-serif;
+ --sans-light-font-style: normal;
+ --sans-light-font-weight: 300;
+ --serif-regular-font-family: 'ReithSerif', Helvetica, Arial, sans-serif;
+ --serif-regular-font-style: normal;
+ --serif-regular-font-weight: 400;
+ --serif-medium-font-family: 'ReithSerif', Helvetica, Arial, sans-serif;
+ --serif-medium-font-style: normal;
+ --serif-medium-font-weight: 500;
+ --serif-medium-italic-font-family: 'ReithSerif', Helvetica, Arial, sans-serif;
+ --serif-medium-italic-font-style: italic;
+ --serif-medium-italic-font-weight: 500;
+ --serif-bold-font-family: 'ReithSerif', Helvetica, Arial, sans-serif;
+ --serif-bold-font-style: normal;
+ --serif-bold-font-weight: 700;
+ --serif-light-font-family: 'ReithSerif', Helvetica, Arial, sans-serif;
+ --serif-light-font-style: normal;
+ --serif-light-font-weight: 300;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/gridWidths.scss b/src/app/components/ThemeProviderSCSSModules/gridWidths.scss
new file mode 100644
index 00000000000..1426f60d470
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/gridWidths.scss
@@ -0,0 +1,13 @@
+// gridWidths.scss
+// SCSS variables for grid widths, matching gridWidths.ts
+$grid-width-240: 240;
+$grid-width-360: 360;
+$grid-width-400: 400;
+$grid-width-600: 600;
+$grid-width-900: 900;
+$grid-width-1008: 1008;
+$grid-width-1280: 1280;
+
+// Usage example:
+// width: #{$grid-width-240}px;
+// width: #{$grid-width-1280 / 16}rem;
diff --git a/src/app/components/ThemeProviderSCSSModules/index.tsx b/src/app/components/ThemeProviderSCSSModules/index.tsx
new file mode 100644
index 00000000000..53f7ed47bcc
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/index.tsx
@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from 'react';
+import defaultServiceVariants from '../../lib/config/services/defaultServiceVariants';
+import { Variants } from '../../models/types/global';
+import themes from './themes/loadableConfig';
+
+interface Props {
+ service: 'mundo';
+ variant?: Variants | null;
+}
+
+export const ThemeProvider = ({
+ children,
+ service,
+ variant,
+}: PropsWithChildren) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let LoadableContextProvider;
+
+ const serviceVariant: Variants = variant || defaultServiceVariants[service];
+
+ if (serviceVariant === 'default' || !serviceVariant) {
+ LoadableContextProvider = themes[service];
+ } else {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore - TODO: come back to this
+ LoadableContextProvider = themes[service][serviceVariant];
+ }
+
+ if (!LoadableContextProvider) {
+ return null;
+ }
+
+ return {children};
+};
+
+export default ThemeProvider;
diff --git a/src/app/components/ThemeProviderSCSSModules/mediaQueries.scss b/src/app/components/ThemeProviderSCSSModules/mediaQueries.scss
new file mode 100644
index 00000000000..0403fbb903e
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/mediaQueries.scss
@@ -0,0 +1,24 @@
+// mediaQueries.scss
+// SCSS variables for GEL Grid breakpoints, matching mediaQueries.ts
+@use './px-to-rem.scss' as pixelsToRem;
+
+$group-0-max-width-bp: pixelsToRem.px-to-rem(239);
+$group-1-min-width-bp: pixelsToRem.px-to-rem(240);
+$group-1-max-width-bp: pixelsToRem.px-to-rem(399);
+$group-2-min-width-bp: pixelsToRem.px-to-rem(400);
+$group-2-max-width-bp: pixelsToRem.px-to-rem(599);
+$group-3-min-width-bp: pixelsToRem.px-to-rem(600);
+$group-3-max-width-bp: pixelsToRem.px-to-rem(1007);
+$group-4-min-width-bp: pixelsToRem.px-to-rem(1008);
+$group-4-max-width-bp: pixelsToRem.px-to-rem(1279);
+$group-5-min-width-bp: pixelsToRem.px-to-rem(1280);
+
+// Media query strings
+$forced-colours: 'screen and (forced-colors: active)';
+$pointer-fine: '(pointer: fine)';
+
+// Usage example:
+// @media (max-width: #{$group-0-max-width-bp}) { ... }
+// @media (min-width: #{$group-1-min-width-bp}) and (max-width: #{$group-1-max-width-bp}) { ... }
+// @media #{$pointer-fine} { ... }
+// @media #{$forced-colours} { ... }
diff --git a/src/app/components/ThemeProviderSCSSModules/palette.scss b/src/app/components/ThemeProviderSCSSModules/palette.scss
new file mode 100644
index 00000000000..7017cf5f7a2
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/palette.scss
@@ -0,0 +1,59 @@
+// palette.scss
+// SCSS variables for palette, matching all exports from palette.ts
+$archive-blue: #3a549c;
+$black: #000000;
+$bluejay: #0f556c;
+$bluejay-lht: #c3dee7;
+$chalk: #eceae7;
+$cloud-dark: #757575;
+$cloud-light: #bababa;
+$consent-action: #f6a21d;
+$consent-background: #323232;
+$consent-content: #bebebe;
+$consent-focus: #68a1f8;
+$dark-saltire: #23104c;
+$dim-grey: #696969;
+$ebon: #222222;
+$error-core: #e51854;
+$ghost: #fdfdfd;
+$grey-10: #141414;
+$grey-11: #bababa;
+$grey-1: #fefefe;
+$grey-2: #f6f6f6;
+$grey-3: #e6e8ea;
+$grey-4: #b0b2b4;
+$grey-5: #8a8c8e;
+$grey-6: #545658;
+$grey-7: #3a3c3e;
+$grey-8: #202224;
+$kingfisher: #11708c;
+$le-teal: #09838b;
+$live-light: #00ccc7;
+$live-medium: #008282;
+$live-dark: #006666;
+$live-core: #009e9e;
+$lunar: #f2f2f2;
+$lunar-light: #f8f8f8;
+$metal: #6e6e73;
+$midnight-black: #121212;
+$newsround-purple: #6c22d6;
+$newsround-purple-30: #9159a8;
+$oat-lht: #f5f3f1;
+$orbit-grey: #4c4c4c;
+$pebble: #aeaeb5;
+$philippine-grey: #8a8c8e;
+$postbox: #b80000;
+$postbox-30: #eab3b3;
+$rhino: #5a5a5a;
+$service-neutral-core: #0071f1;
+$service-neutral-dark: #0051ad;
+$shadow: #3f3f42;
+$sport-mist: #f7f7f5;
+$sport-silver: #dbdbdb;
+$sport-yellow: #ffd230;
+$sport-yellow-30: #bb9a31;
+$stone: #d5d0cd;
+$storm: #404040;
+$success-core: #148a00;
+$weather-blue: #067eb3;
+$white: #ffffff;
diff --git a/src/app/components/ThemeProviderSCSSModules/px-to-rem.scss b/src/app/components/ThemeProviderSCSSModules/px-to-rem.scss
new file mode 100644
index 00000000000..4f5b7a98e0a
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/px-to-rem.scss
@@ -0,0 +1,7 @@
+// px-to-rem.scss
+// Utility function for converting px to rem
+@use 'sass:math';
+
+@function px-to-rem($px, $base: 16) {
+ @return math.div($px, $base) * 1rem;
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/spacings.scss b/src/app/components/ThemeProviderSCSSModules/spacings.scss
new file mode 100644
index 00000000000..09c4c40af9c
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/spacings.scss
@@ -0,0 +1,15 @@
+
+@use './px-to-rem' as *;
+// SCSS variables for spacing, matching spacings.ts
+$full: px-to-rem(8); // 8px
+$half: px-to-rem(4); // 4px
+$double: px-to-rem(16); // 16px
+$triple: px-to-rem(24); // 24px
+$quadruple: px-to-rem(32); // 32px
+$quintuple: px-to-rem(40); // 40px
+$sextuple: px-to-rem(48); // 48px
+
+$margin-below-400px: $full;
+$gutter-below-600px: $full;
+$margin-above-400px: $double;
+$gutter-above-600px: $double;
diff --git a/src/app/components/ThemeProviderSCSSModules/themeTokens.scss b/src/app/components/ThemeProviderSCSSModules/themeTokens.scss
new file mode 100644
index 00000000000..146043d0c81
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/themeTokens.scss
@@ -0,0 +1,6 @@
+@forward './fontSizes.scss' as fontSizes-*;
+@forward './palette.scss' as palette-*;
+@forward './fontVariants.scss' as fontVariants-*;
+@forward './spacings.scss' as spacings-*;
+@forward './mediaQueries.scss' as mediaQueries-*;
+@forward './px-to-rem.scss' as pixelsToRem-*;
diff --git a/src/app/components/ThemeProviderSCSSModules/themes/loadableConfig.ts b/src/app/components/ThemeProviderSCSSModules/themes/loadableConfig.ts
new file mode 100644
index 00000000000..2b3243b6986
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/themes/loadableConfig.ts
@@ -0,0 +1,9 @@
+import loadable from 'next/dynamic';
+
+export const themes = {
+ mundo: loadable(
+ () => import(/* webpackChunkName: "themes-mundo" */ './mundo/mundo'),
+ ),
+};
+
+export default themes;
diff --git a/src/app/components/ThemeProviderSCSSModules/themes/mundo/mundo.ts b/src/app/components/ThemeProviderSCSSModules/themes/mundo/mundo.ts
new file mode 100644
index 00000000000..72a7da1fd65
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/themes/mundo/mundo.ts
@@ -0,0 +1,15 @@
+import '../../fontFaces/reith-sans-bold.scss';
+import '../../fontFaces/reith-sans-regular.scss';
+import '../../fontFaces/reith-serif-medium.scss';
+import '../../fontFaces/reith-serif-light.scss';
+import '../../fontVariants/reith.scss';
+import './palette.scss';
+import '../../fontScripts/latinWithDiacritics.scss';
+import withThemeProvider from '#app/components/ThemeProviderSCSSModules/withThemeProvider';
+import brandSVG from '../../chameleonLogos/mundo';
+
+const mundoTheme = {
+ brandSVG,
+};
+
+export default withThemeProvider(mundoTheme);
diff --git a/src/app/components/ThemeProviderSCSSModules/themes/mundo/palette.scss b/src/app/components/ThemeProviderSCSSModules/themes/mundo/palette.scss
new file mode 100644
index 00000000000..40d09f61971
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/themes/mundo/palette.scss
@@ -0,0 +1,10 @@
+@use '../../palette.scss' as palette;
+
+
+:root {
+ --brand-background: #{palette.$postbox};
+ --brand-logo: #{palette.$white};
+ --brand-foreground: #{palette.$ghost};
+ --brand-highlight: #{palette.$white};
+ --brand-border: #{palette.$postbox-30};
+}
diff --git a/src/app/components/ThemeProviderSCSSModules/withThemeProvider.tsx b/src/app/components/ThemeProviderSCSSModules/withThemeProvider.tsx
new file mode 100644
index 00000000000..2eba6332405
--- /dev/null
+++ b/src/app/components/ThemeProviderSCSSModules/withThemeProvider.tsx
@@ -0,0 +1,43 @@
+import { createContext, ReactNode, FC, use } from 'react';
+import { Helmet } from 'react-helmet';
+import { RequestContext } from '../../contexts/RequestContext';
+import {
+ LIVE_TV_PAGE,
+ MEDIA_ARTICLE_PAGE,
+ TV_PAGE,
+} from '../../routes/utils/pageTypes';
+import { PageTypes } from '../../models/types/global';
+import { BrandSVG } from '../../models/types/theming';
+
+const isDarkUiPage = (pageType: PageTypes) =>
+ ([MEDIA_ARTICLE_PAGE, TV_PAGE, LIVE_TV_PAGE] as PageTypes[]).includes(
+ pageType,
+ );
+
+export const ThemeContext = createContext(undefined);
+
+type Theme = {
+ brandSVG: BrandSVG;
+};
+
+type Props = {
+ children: ReactNode;
+};
+
+const withThemeProvider = (theme: Theme) => {
+ const ThemeProvider: FC = ({ children }) => {
+ const { pageType } = use(RequestContext);
+ const isDarkUi = isDarkUiPage(pageType);
+
+ // eslint-disable-next-line react/jsx-no-constructed-context-values
+ return (
+
+
+ {children}
+
+ );
+ };
+ return ThemeProvider;
+};
+
+export default withThemeProvider;
diff --git a/src/app/legacy/containers/PageHandlers/withContexts.jsx b/src/app/legacy/containers/PageHandlers/withContexts.jsx
index 4f210c5e097..1d647d4f5ae 100644
--- a/src/app/legacy/containers/PageHandlers/withContexts.jsx
+++ b/src/app/legacy/containers/PageHandlers/withContexts.jsx
@@ -1,4 +1,5 @@
import { ThemeProvider } from '../../../components/ThemeProvider';
+// import ThemeProviderSCSSModules from '../../../components/ThemeProviderSCSSModules';
import { RequestContextProvider } from '../../../contexts/RequestContext';
import { ToggleContextProvider } from '../../../contexts/ToggleContext';
import { UserContextProvider } from '../../../contexts/UserContext';
@@ -67,9 +68,12 @@ const WithContexts = Component => {
data={pageData}
>
+ {/* Disabled as only works on Mundo on the homepage currently, uncomment to experiment */}
+ {/* */}
+ {/* */}
diff --git a/src/index.d.ts b/src/index.d.ts
index 1ab1f14d0fd..4c2c82b9599 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,5 +1,10 @@
declare module '*.md';
+declare module '*.module.scss' {
+ const styles: { [className: string]: string };
+ export default styles;
+}
+
declare module 'intersection-observer';
declare namespace React.JSX {
diff --git a/tsconfig.json b/tsconfig.json
index c7cfa765277..9023a88c666 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -44,4 +44,8 @@
},
"include": ["src/**/*", "src/app/legacy/**/*.ts*"],
"exclude": ["node_modules", "build"]
+ ,
+ "plugins": [
+ { "name": "typescript-plugin-css-modules" }
+ ]
}
diff --git a/webpack.config.client.js b/webpack.config.client.js
index 6acbbd67517..0feb5e09bc4 100644
--- a/webpack.config.client.js
+++ b/webpack.config.client.js
@@ -12,6 +12,7 @@ const LoadablePlugin = require('@loadable/webpack-plugin');
const webpack = require('webpack');
const dotenv = require('dotenv');
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { getClientEnvVars } = require('./src/clientEnvVars');
const FRAMEWORK_BUNDLES = ['react', 'react-dom'];
@@ -92,6 +93,33 @@ module.exports = ({
? `http://localhost:${webpackDevServerPort}/`
: prodPublicPath,
},
+ module: {
+ rules: [
+ {
+ test: /\.module\.scss$/,
+ use: [
+ IS_PROD ? MiniCssExtractPlugin.loader : 'style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ importLoaders: 1,
+ esModule: false,
+ },
+ },
+ 'sass-loader',
+ ],
+ },
+ {
+ test: /(? {
maxChunks: 1,
}),
],
+ module: {
+ rules: [
+ {
+ test: /\.module\.scss$/,
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ importLoaders: 1,
+ esModule: false,
+ },
+ },
+ 'sass-loader',
+ ],
+ },
+ {
+ test: /(? {
) : (
-
-
- {RenderChildrenOrError}
-
-
+
+
+
+ {RenderChildrenOrError}
+
+
+
)}
diff --git a/yarn.lock b/yarn.lock
index f5f95156501..8f157285f31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,13 @@ __metadata:
languageName: node
linkType: hard
+"@adobe/css-tools@npm:~4.3.1":
+ version: 4.3.3
+ resolution: "@adobe/css-tools@npm:4.3.3"
+ checksum: 10/0e77057efb4e18182560855503066b75edca98671be327d3f8a7ae89ec3da6821e693114b55225909fca00d7e7ed8422f3d79d71fe95dd4d5df1f2026a9fda02
+ languageName: node
+ linkType: hard
+
"@ampproject/remapping@npm:^2.2.0":
version: 2.3.0
resolution: "@ampproject/remapping@npm:2.3.0"
@@ -4910,6 +4917,150 @@ __metadata:
languageName: node
linkType: hard
+"@parcel/watcher-android-arm64@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-android-arm64@npm:2.5.1"
+ conditions: os=android & cpu=arm64
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-darwin-arm64@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-darwin-arm64@npm:2.5.1"
+ conditions: os=darwin & cpu=arm64
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-darwin-x64@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-darwin-x64@npm:2.5.1"
+ conditions: os=darwin & cpu=x64
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-freebsd-x64@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-freebsd-x64@npm:2.5.1"
+ conditions: os=freebsd & cpu=x64
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-linux-arm-glibc@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.1"
+ conditions: os=linux & cpu=arm & libc=glibc
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-linux-arm-musl@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.1"
+ conditions: os=linux & cpu=arm & libc=musl
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-linux-arm64-glibc@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.1"
+ conditions: os=linux & cpu=arm64 & libc=glibc
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-linux-arm64-musl@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.1"
+ conditions: os=linux & cpu=arm64 & libc=musl
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-linux-x64-glibc@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.1"
+ conditions: os=linux & cpu=x64 & libc=glibc
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-linux-x64-musl@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.1"
+ conditions: os=linux & cpu=x64 & libc=musl
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-win32-arm64@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-win32-arm64@npm:2.5.1"
+ conditions: os=win32 & cpu=arm64
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-win32-ia32@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-win32-ia32@npm:2.5.1"
+ conditions: os=win32 & cpu=ia32
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher-win32-x64@npm:2.5.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher-win32-x64@npm:2.5.1"
+ conditions: os=win32 & cpu=x64
+ languageName: node
+ linkType: hard
+
+"@parcel/watcher@npm:^2.4.1":
+ version: 2.5.1
+ resolution: "@parcel/watcher@npm:2.5.1"
+ dependencies:
+ "@parcel/watcher-android-arm64": "npm:2.5.1"
+ "@parcel/watcher-darwin-arm64": "npm:2.5.1"
+ "@parcel/watcher-darwin-x64": "npm:2.5.1"
+ "@parcel/watcher-freebsd-x64": "npm:2.5.1"
+ "@parcel/watcher-linux-arm-glibc": "npm:2.5.1"
+ "@parcel/watcher-linux-arm-musl": "npm:2.5.1"
+ "@parcel/watcher-linux-arm64-glibc": "npm:2.5.1"
+ "@parcel/watcher-linux-arm64-musl": "npm:2.5.1"
+ "@parcel/watcher-linux-x64-glibc": "npm:2.5.1"
+ "@parcel/watcher-linux-x64-musl": "npm:2.5.1"
+ "@parcel/watcher-win32-arm64": "npm:2.5.1"
+ "@parcel/watcher-win32-ia32": "npm:2.5.1"
+ "@parcel/watcher-win32-x64": "npm:2.5.1"
+ detect-libc: "npm:^1.0.3"
+ is-glob: "npm:^4.0.3"
+ micromatch: "npm:^4.0.5"
+ node-addon-api: "npm:^7.0.0"
+ node-gyp: "npm:latest"
+ dependenciesMeta:
+ "@parcel/watcher-android-arm64":
+ optional: true
+ "@parcel/watcher-darwin-arm64":
+ optional: true
+ "@parcel/watcher-darwin-x64":
+ optional: true
+ "@parcel/watcher-freebsd-x64":
+ optional: true
+ "@parcel/watcher-linux-arm-glibc":
+ optional: true
+ "@parcel/watcher-linux-arm-musl":
+ optional: true
+ "@parcel/watcher-linux-arm64-glibc":
+ optional: true
+ "@parcel/watcher-linux-arm64-musl":
+ optional: true
+ "@parcel/watcher-linux-x64-glibc":
+ optional: true
+ "@parcel/watcher-linux-x64-musl":
+ optional: true
+ "@parcel/watcher-win32-arm64":
+ optional: true
+ "@parcel/watcher-win32-ia32":
+ optional: true
+ "@parcel/watcher-win32-x64":
+ optional: true
+ checksum: 10/2cc1405166fb3016b34508661902ab08b6dec59513708165c633c84a4696fff64f9b99ea116e747c121215e09619f1decab6f0350d1cb26c9210b98eb28a6a56
+ languageName: node
+ linkType: hard
+
"@paulirish/trace_engine@npm:0.0.61":
version: 0.0.61
resolution: "@paulirish/trace_engine@npm:0.0.61"
@@ -5292,6 +5443,16 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/addon-styling-webpack@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "@storybook/addon-styling-webpack@npm:3.0.0"
+ peerDependencies:
+ storybook: ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0
+ webpack: ^5.0.0
+ checksum: 10/31cc7a3cecd9f45c57ac13d8647bcd62e508e1975ccee820972cb2abcc2e1166d9a356d629f1f01c88801617744c112976176e92fdf6f382a16efe506f2e5eb3
+ languageName: node
+ linkType: hard
+
"@storybook/builder-webpack5@npm:10.3.5":
version: 10.3.5
resolution: "@storybook/builder-webpack5@npm:10.3.5"
@@ -6023,6 +6184,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/identity-obj-proxy@npm:3.0.2":
+ version: 3.0.2
+ resolution: "@types/identity-obj-proxy@npm:3.0.2"
+ checksum: 10/77387ee587657ab24f12a1dee5c0e1386358d5c38cda5cac78bc5049340cb358e009f6254de3bbdee6a08e46f13b1552cd47a0bbd3e7a53ff469bf58a04ec6e9
+ languageName: node
+ linkType: hard
+
"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1, @types/istanbul-lib-coverage@npm:^2.0.6":
version: 2.0.6
resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
@@ -6196,6 +6364,24 @@ __metadata:
languageName: node
linkType: hard
+"@types/postcss-modules-local-by-default@npm:^4.0.2":
+ version: 4.0.2
+ resolution: "@types/postcss-modules-local-by-default@npm:4.0.2"
+ dependencies:
+ postcss: "npm:^8.0.0"
+ checksum: 10/c4a50f0fab1bacbf2968a05156f0acf10225a605b021dcfb4e39892429507089a91919609111c79d1ed5902c55f9b4ee35c00aa75d98bb18d5415b3cd1223239
+ languageName: node
+ linkType: hard
+
+"@types/postcss-modules-scope@npm:^3.0.4":
+ version: 3.0.4
+ resolution: "@types/postcss-modules-scope@npm:3.0.4"
+ dependencies:
+ postcss: "npm:^8.0.0"
+ checksum: 10/4249ace34023dc797b47a1041c844d6a772d6339a96e7a45fdacc70d03db8fb2917ac90728c390a743ecf2da821f921761ad2bdb57f4d6936ad4690bc572ad5c
+ languageName: node
+ linkType: hard
+
"@types/qs@npm:*":
version: 6.14.0
resolution: "@types/qs@npm:6.14.0"
@@ -8536,7 +8722,7 @@ __metadata:
languageName: node
linkType: hard
-"chokidar@npm:^4.0.1":
+"chokidar@npm:^4.0.0, chokidar@npm:^4.0.1":
version: 4.0.3
resolution: "chokidar@npm:4.0.3"
dependencies:
@@ -9039,6 +9225,15 @@ __metadata:
languageName: node
linkType: hard
+"copy-anything@npm:^2.0.1":
+ version: 2.0.6
+ resolution: "copy-anything@npm:2.0.6"
+ dependencies:
+ is-what: "npm:^3.14.1"
+ checksum: 10/3b41be8f6322c2c13e93cde62a64d532f138f31d44ab85a3405d88601134afccc068be06534c162ed5c06b209788c423d7aaa50f1c34a92db81a1f8560d199eb
+ languageName: node
+ linkType: hard
+
"copy-webpack-plugin@npm:13.0.1":
version: 13.0.1
resolution: "copy-webpack-plugin@npm:13.0.1"
@@ -9214,7 +9409,7 @@ __metadata:
languageName: node
linkType: hard
-"css-loader@npm:^7.1.2":
+"css-loader@npm:7.1.2, css-loader@npm:^7.1.2":
version: 7.1.2
resolution: "css-loader@npm:7.1.2"
dependencies:
@@ -9521,7 +9716,7 @@ __metadata:
languageName: node
linkType: hard
-"debug@npm:^4.4.3":
+"debug@npm:^4.3.2, debug@npm:^4.4.3":
version: 4.4.3
resolution: "debug@npm:4.4.3"
dependencies:
@@ -9742,6 +9937,15 @@ __metadata:
languageName: node
linkType: hard
+"detect-libc@npm:^1.0.3":
+ version: 1.0.3
+ resolution: "detect-libc@npm:1.0.3"
+ bin:
+ detect-libc: ./bin/detect-libc.js
+ checksum: 10/3849fe7720feb153e4ac9407086956e073f1ce1704488290ef0ca8aab9430a8d48c8a9f8351889e7cdc64e5b1128589501e4fef48f3a4a49ba92cd6d112d0757
+ languageName: node
+ linkType: hard
+
"detect-libc@npm:^2.1.2":
version: 2.1.2
resolution: "detect-libc@npm:2.1.2"
@@ -9969,6 +10173,13 @@ __metadata:
languageName: node
linkType: hard
+"dotenv@npm:^16.4.2":
+ version: 16.6.1
+ resolution: "dotenv@npm:16.6.1"
+ checksum: 10/1d1897144344447ffe62aa1a6d664f4cd2e0784e0aff787eeeec1940ded32f8e4b5b506d665134fc87157baa086fce07ec6383970a2b6d2e7985beaed6a4cc14
+ languageName: node
+ linkType: hard
+
"dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
version: 1.0.1
resolution: "dunder-proto@npm:1.0.1"
@@ -10201,6 +10412,17 @@ __metadata:
languageName: node
linkType: hard
+"errno@npm:^0.1.1":
+ version: 0.1.8
+ resolution: "errno@npm:0.1.8"
+ dependencies:
+ prr: "npm:~1.0.1"
+ bin:
+ errno: cli.js
+ checksum: 10/93076ed11bedb8f0389cbefcbdd3445f66443159439dccbaac89a053428ad92147676736235d275612dc0296d3f9a7e6b7177ed78a566b6cd15dacd4fa0d5888
+ languageName: node
+ linkType: hard
+
"error-ex@npm:^1.3.1":
version: 1.3.2
resolution: "error-ex@npm:1.3.2"
@@ -11915,6 +12137,13 @@ __metadata:
languageName: node
linkType: hard
+"harmony-reflect@npm:^1.4.6":
+ version: 1.6.2
+ resolution: "harmony-reflect@npm:1.6.2"
+ checksum: 10/69d30ebfb5dbd6ff0553725c7922404cf1dfe5390db1618298eed27fe6c9bd2f3f677727e9da969d21648f4a6a39041e2f46e99976be4385f9e34bac23058cd4
+ languageName: node
+ linkType: hard
+
"has-bigints@npm:^1.0.2":
version: 1.1.0
resolution: "has-bigints@npm:1.1.0"
@@ -12314,7 +12543,7 @@ __metadata:
languageName: node
linkType: hard
-"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
version: 0.6.3
resolution: "iconv-lite@npm:0.6.3"
dependencies:
@@ -12341,6 +12570,15 @@ __metadata:
languageName: node
linkType: hard
+"identity-obj-proxy@npm:3.0.0":
+ version: 3.0.0
+ resolution: "identity-obj-proxy@npm:3.0.0"
+ dependencies:
+ harmony-reflect: "npm:^1.4.6"
+ checksum: 10/66fe4d2ffc67655174f6abe100ab3b36d2f5e4de5b28a7c3121e5f51bd4e7c8c1bee4f9a41ce0586ace57fb63bfedbfc39508b7cb43b9e3ed6dc42f762158b4e
+ languageName: node
+ linkType: hard
+
"ieee754@npm:^1.1.13":
version: 1.2.1
resolution: "ieee754@npm:1.2.1"
@@ -12362,6 +12600,15 @@ __metadata:
languageName: node
linkType: hard
+"image-size@npm:~0.5.0":
+ version: 0.5.5
+ resolution: "image-size@npm:0.5.5"
+ bin:
+ image-size: bin/image-size.js
+ checksum: 10/f41ec6cfccfa6471980e83568033a66ec53f84d1bcb70033e946a7db9c1b6bbf5645ec90fa5a8bdcdc84d86af0032014eff6fa078a60c2398dfce6676c46bdb7
+ languageName: node
+ linkType: hard
+
"image-ssim@npm:^0.2.0":
version: 0.2.0
resolution: "image-ssim@npm:0.2.0"
@@ -12369,6 +12616,13 @@ __metadata:
languageName: node
linkType: hard
+"immutable@npm:^5.0.2":
+ version: 5.1.4
+ resolution: "immutable@npm:5.1.4"
+ checksum: 10/0655b33af249ff99c7a56f9e6d7aee632af2dc25758710ddf224bda645f66dd2dd98119c0d86986895ea52cc889b6c5127a848c6fba21aadabdc4c5ead04be2b
+ languageName: node
+ linkType: hard
+
"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
version: 3.3.1
resolution: "import-fresh@npm:3.3.1"
@@ -12890,6 +13144,13 @@ __metadata:
languageName: node
linkType: hard
+"is-what@npm:^3.14.1":
+ version: 3.14.1
+ resolution: "is-what@npm:3.14.1"
+ checksum: 10/249beb4a8c1729c80ed24fa8527835301c8c70d2fa99706a301224576e0650df61edd7a0a8853999bf5fbe2c551f07148d2c3535260772e05a4c373d3d5362e1
+ languageName: node
+ linkType: hard
+
"is-windows@npm:^1.0.1":
version: 1.0.2
resolution: "is-windows@npm:1.0.2"
@@ -14138,6 +14399,41 @@ __metadata:
languageName: node
linkType: hard
+"less@npm:^4.2.0":
+ version: 4.5.1
+ resolution: "less@npm:4.5.1"
+ dependencies:
+ copy-anything: "npm:^2.0.1"
+ errno: "npm:^0.1.1"
+ graceful-fs: "npm:^4.1.2"
+ image-size: "npm:~0.5.0"
+ make-dir: "npm:^2.1.0"
+ mime: "npm:^1.4.1"
+ needle: "npm:^3.1.0"
+ parse-node-version: "npm:^1.0.1"
+ source-map: "npm:~0.6.0"
+ tslib: "npm:^2.3.0"
+ dependenciesMeta:
+ errno:
+ optional: true
+ graceful-fs:
+ optional: true
+ image-size:
+ optional: true
+ make-dir:
+ optional: true
+ mime:
+ optional: true
+ needle:
+ optional: true
+ source-map:
+ optional: true
+ bin:
+ lessc: bin/lessc
+ checksum: 10/ea48075c73e206520b738c9387668a84cec404d24972b9e93c038fdde6ee38f8e2e9c820ed41e299c9f421711f4ce5bc9f719e6939367a0e6d5177d27f593038
+ languageName: node
+ linkType: hard
+
"leven@npm:^3.1.0":
version: 3.1.0
resolution: "leven@npm:3.1.0"
@@ -14209,6 +14505,13 @@ __metadata:
languageName: node
linkType: hard
+"lilconfig@npm:^2.0.5":
+ version: 2.1.0
+ resolution: "lilconfig@npm:2.1.0"
+ checksum: 10/b1314a2e55319013d5e7d7d08be39015829d2764a1eaee130129545d40388499d81b1c31b0f9b3417d4db12775a88008b72ec33dd06e0184cf7503b32ca7cc0b
+ languageName: node
+ linkType: hard
+
"lines-and-columns@npm:^1.1.6":
version: 1.2.4
resolution: "lines-and-columns@npm:1.2.4"
@@ -14279,6 +14582,13 @@ __metadata:
languageName: node
linkType: hard
+"lodash.camelcase@npm:^4.3.0":
+ version: 4.3.0
+ resolution: "lodash.camelcase@npm:4.3.0"
+ checksum: 10/c301cc379310441dc73cd6cebeb91fb254bea74e6ad3027f9346fc43b4174385153df420ffa521654e502fd34c40ef69ca4e7d40ee7129a99e06f306032bfc65
+ languageName: node
+ linkType: hard
+
"lodash.debounce@npm:^4.0.8":
version: 4.0.8
resolution: "lodash.debounce@npm:4.0.8"
@@ -14627,7 +14937,7 @@ __metadata:
languageName: node
linkType: hard
-"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
version: 4.0.8
resolution: "micromatch@npm:4.0.8"
dependencies:
@@ -14669,7 +14979,7 @@ __metadata:
languageName: node
linkType: hard
-"mime@npm:1.6.0":
+"mime@npm:1.6.0, mime@npm:^1.4.1":
version: 1.6.0
resolution: "mime@npm:1.6.0"
bin:
@@ -14708,6 +15018,18 @@ __metadata:
languageName: node
linkType: hard
+"mini-css-extract-plugin@npm:2.9.4":
+ version: 2.9.4
+ resolution: "mini-css-extract-plugin@npm:2.9.4"
+ dependencies:
+ schema-utils: "npm:^4.0.0"
+ tapable: "npm:^2.2.1"
+ peerDependencies:
+ webpack: ^5.0.0
+ checksum: 10/24a0418dc49baed58a10a8b81e4d2fe474e89ccdc9370a7c69bd0aeeb5a70d2b4ee12f33b98c95a68423c79c1de7cc2a25aaa2105600b712e7d594cb0d56c9d4
+ languageName: node
+ linkType: hard
+
"minimalistic-assert@npm:^1.0.0":
version: 1.0.1
resolution: "minimalistic-assert@npm:1.0.1"
@@ -15023,6 +15345,18 @@ __metadata:
languageName: node
linkType: hard
+"needle@npm:^3.1.0":
+ version: 3.3.1
+ resolution: "needle@npm:3.3.1"
+ dependencies:
+ iconv-lite: "npm:^0.6.3"
+ sax: "npm:^1.2.4"
+ bin:
+ needle: bin/needle
+ checksum: 10/31925ec72b93ffd1f5614a4f381878e7c31f1838cd36055aa4148c49a3a9d16429987fc64b509538f61fccbb49aac9ec2e91b1ed028aafb16f943f1993097d96
+ languageName: node
+ linkType: hard
+
"negotiator@npm:0.6.3":
version: 0.6.3
resolution: "negotiator@npm:0.6.3"
@@ -15148,6 +15482,15 @@ __metadata:
languageName: node
linkType: hard
+"node-addon-api@npm:^7.0.0":
+ version: 7.1.1
+ resolution: "node-addon-api@npm:7.1.1"
+ dependencies:
+ node-gyp: "npm:latest"
+ checksum: 10/ee1e1ed6284a2f8cd1d59ac6175ecbabf8978dcf570345e9a8095a9d0a2b9ced591074ae77f9009287b00c402352b38aa9322a34f2199cdc9f567b842a636b94
+ languageName: node
+ linkType: hard
+
"node-dir@npm:^0.1.17":
version: 0.1.17
resolution: "node-dir@npm:0.1.17"
@@ -15657,6 +16000,13 @@ __metadata:
languageName: node
linkType: hard
+"parse-node-version@npm:^1.0.1":
+ version: 1.0.1
+ resolution: "parse-node-version@npm:1.0.1"
+ checksum: 10/ac9b40c6473035ec2dd0afe793b226743055f8119b50853be2022c817053c3377d02b4bb42e0735d9dcb6c32d16478086934b0a8de570a5f5eebacbfc1514ccd
+ languageName: node
+ linkType: hard
+
"parse-passwd@npm:^1.0.0":
version: 1.0.0
resolution: "parse-passwd@npm:1.0.0"
@@ -15907,7 +16257,25 @@ __metadata:
languageName: node
linkType: hard
-"postcss-modules-extract-imports@npm:^3.1.0":
+"postcss-load-config@npm:^3.1.4":
+ version: 3.1.4
+ resolution: "postcss-load-config@npm:3.1.4"
+ dependencies:
+ lilconfig: "npm:^2.0.5"
+ yaml: "npm:^1.10.2"
+ peerDependencies:
+ postcss: ">=8.0.9"
+ ts-node: ">=9.0.0"
+ peerDependenciesMeta:
+ postcss:
+ optional: true
+ ts-node:
+ optional: true
+ checksum: 10/75fa409d77b96e6f53e99f680c550f25ca8922c1150d3d368ded1f6bd8e0d4d67a615fe1f1c5d409aefb6e66fb4b5e48e86856d581329913de84578def078b19
+ languageName: node
+ linkType: hard
+
+"postcss-modules-extract-imports@npm:^3.0.0, postcss-modules-extract-imports@npm:^3.1.0":
version: 3.1.0
resolution: "postcss-modules-extract-imports@npm:3.1.0"
peerDependencies:
@@ -15916,7 +16284,7 @@ __metadata:
languageName: node
linkType: hard
-"postcss-modules-local-by-default@npm:^4.0.5":
+"postcss-modules-local-by-default@npm:^4.0.4, postcss-modules-local-by-default@npm:^4.0.5":
version: 4.2.0
resolution: "postcss-modules-local-by-default@npm:4.2.0"
dependencies:
@@ -15929,7 +16297,7 @@ __metadata:
languageName: node
linkType: hard
-"postcss-modules-scope@npm:^3.2.0":
+"postcss-modules-scope@npm:^3.1.1, postcss-modules-scope@npm:^3.2.0":
version: 3.2.1
resolution: "postcss-modules-scope@npm:3.2.1"
dependencies:
@@ -15979,7 +16347,7 @@ __metadata:
languageName: node
linkType: hard
-"postcss@npm:^8.4.33, postcss@npm:^8.5.6":
+"postcss@npm:^8.0.0, postcss@npm:^8.4.33, postcss@npm:^8.4.35, postcss@npm:^8.5.6":
version: 8.5.6
resolution: "postcss@npm:8.5.6"
dependencies:
@@ -16218,6 +16586,13 @@ __metadata:
languageName: node
linkType: hard
+"prr@npm:~1.0.1":
+ version: 1.0.1
+ resolution: "prr@npm:1.0.1"
+ checksum: 10/3bca2db0479fd38f8c4c9439139b0c42dcaadcc2fbb7bb8e0e6afaa1383457f1d19aea9e5f961d5b080f1cfc05bfa1fe9e45c97a1d3fd6d421950a73d3108381
+ languageName: node
+ linkType: hard
+
"pump@npm:^3.0.0":
version: 3.0.3
resolution: "pump@npm:3.0.3"
@@ -16862,6 +17237,13 @@ __metadata:
languageName: node
linkType: hard
+"reserved-words@npm:^0.1.2":
+ version: 0.1.2
+ resolution: "reserved-words@npm:0.1.2"
+ checksum: 10/72e80f71dcde1e2d697e102473ad6d597e1659118836092c63cc4db68a64857f07f509176d239c8675b24f7f03574336bf202a780cc1adb39574e2884d1fd1fa
+ languageName: node
+ linkType: hard
+
"resolve-cwd@npm:^3.0.0":
version: 3.0.0
resolution: "resolve-cwd@npm:3.0.0"
@@ -17141,6 +17523,80 @@ __metadata:
languageName: node
linkType: hard
+"sass-loader@npm:16.0.5":
+ version: 16.0.5
+ resolution: "sass-loader@npm:16.0.5"
+ dependencies:
+ neo-async: "npm:^2.6.2"
+ peerDependencies:
+ "@rspack/core": 0.x || 1.x
+ node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+ sass: ^1.3.0
+ sass-embedded: "*"
+ webpack: ^5.0.0
+ peerDependenciesMeta:
+ "@rspack/core":
+ optional: true
+ node-sass:
+ optional: true
+ sass:
+ optional: true
+ sass-embedded:
+ optional: true
+ webpack:
+ optional: true
+ checksum: 10/978b553900427c3fc24ed16b8258829d6a851bc5b0ab226cf43143fc08a0386e8cd07db367104d190a6cf0945af071805f70773525a970673c5b61fda4b7a59e
+ languageName: node
+ linkType: hard
+
+"sass@npm:1.94.2":
+ version: 1.94.2
+ resolution: "sass@npm:1.94.2"
+ dependencies:
+ "@parcel/watcher": "npm:^2.4.1"
+ chokidar: "npm:^4.0.0"
+ immutable: "npm:^5.0.2"
+ source-map-js: "npm:>=0.6.2 <2.0.0"
+ dependenciesMeta:
+ "@parcel/watcher":
+ optional: true
+ bin:
+ sass: sass.js
+ checksum: 10/e60c214ea93677740c9ddfad55c77fd433255bbfdd9faba137acf1215bed5ba6ad9d83efea81feb87a89283931d01f0435227e3fff37c65c263e0ee05f885328
+ languageName: node
+ linkType: hard
+
+"sass@npm:^1.70.0":
+ version: 1.97.3
+ resolution: "sass@npm:1.97.3"
+ dependencies:
+ "@parcel/watcher": "npm:^2.4.1"
+ chokidar: "npm:^4.0.0"
+ immutable: "npm:^5.0.2"
+ source-map-js: "npm:>=0.6.2 <2.0.0"
+ dependenciesMeta:
+ "@parcel/watcher":
+ optional: true
+ bin:
+ sass: sass.js
+ checksum: 10/707ef8e525ed32d375e737346140d4b675f44de208df996c2df3407f5e62f3f38226ea1faf41a9fd4b068201e67b3a7e152b9e9c3b098daa847dd480c735f038
+ languageName: node
+ linkType: hard
+
+"sax@npm:^1.2.4":
+ version: 1.4.4
+ resolution: "sax@npm:1.4.4"
+ checksum: 10/00ff7b258baa37d98f8abfa0b5c8b3ee739ca37e9b6ecb83405be9e6e5b0b2856394a5eff142db1d987d589b54b139d4236f25830c1e17a2b640efa53c8fda72
+ languageName: node
+ linkType: hard
+
+"sax@npm:~1.3.0":
+ version: 1.3.0
+ resolution: "sax@npm:1.3.0"
+ checksum: 10/bb571b31d30ecb0353c2ff5f87b117a03e5fb9eb4c1519141854c1a8fbee0a77ddbe8045f413259e711833aa03da210887df8527d19cdc55f299822dbf4b34de
+ languageName: node
+ linkType: hard
+
"saxes@npm:^6.0.0":
version: 6.0.0
resolution: "saxes@npm:6.0.0"
@@ -17660,6 +18116,7 @@ __metadata:
"@optimizely/react-sdk": "npm:3.3.1"
"@storybook/addon-a11y": "npm:10.3.5"
"@storybook/addon-docs": "npm:10.3.5"
+ "@storybook/addon-styling-webpack": "npm:^3.0.0"
"@storybook/builder-webpack5": "npm:10.3.5"
"@storybook/cli": "npm:10.3.5"
"@storybook/react-webpack5": "npm:10.3.5"
@@ -17668,6 +18125,7 @@ __metadata:
"@testing-library/react": "npm:16.3.1"
"@testing-library/react-hooks": "npm:8.0.1"
"@testing-library/user-event": "npm:14.6.1"
+ "@types/identity-obj-proxy": "npm:3.0.2"
"@types/jest": "npm:30.0.0"
"@types/js-cookie": "npm:^3.0.3"
"@types/jsdom": "npm:27.0.0"
@@ -17697,6 +18155,7 @@ __metadata:
copy-webpack-plugin: "npm:13.0.1"
core-js: "npm:3.46.0"
crypto: "npm:1.0.1"
+ css-loader: "npm:7.1.2"
cypress: "npm:15.11.0"
cypress-axe: "npm:1.7.0"
cypress-multi-reporters: "npm:2.0.5"
@@ -17721,6 +18180,7 @@ __metadata:
happy-dom: "npm:20.8.9"
helmet: "npm:8.1.0"
husky: "npm:9.1.7"
+ identity-obj-proxy: "npm:3.0.0"
intersection-observer: "npm:0.12.2"
jalaali-js: "npm:1.2.8"
jest: "npm:30.3.0"
@@ -17734,6 +18194,7 @@ __metadata:
jsdom: "npm:27.0.0"
lighthouse: "npm:13.0.1"
lru-cache: "npm:11.2.7"
+ mini-css-extract-plugin: "npm:2.9.4"
minimist: "npm:1.2.8"
mkdirp: "npm:3.0.1"
mocha-junit-reporter: "npm:2.2.1"
@@ -17752,16 +18213,20 @@ __metadata:
react-router-config: "npm:5.1.1"
react-router-dom: "npm:5.3.4"
retry: "npm:0.13.1"
+ sass: "npm:1.94.2"
+ sass-loader: "npm:16.0.5"
start-server-nestjs-webpack-plugin: "npm:2.2.5"
storybook: "npm:10.3.5"
stream-browserify: "npm:3.0.0"
strip-ansi: "npm:7.1.2"
+ style-loader: "npm:4.0.0"
supertest: "npm:7.2.2"
terser-webpack-plugin: "npm:5.3.14"
timemachine: "npm:0.3.2"
ts-jest: "npm:29.4.9"
ts-loader: "npm:9.5.4"
typescript: "npm:5.9.3"
+ typescript-plugin-css-modules: "npm:5.2.0"
undici: "npm:7.24.0"
url-parse: "npm:1.5.10"
uuid: "npm:13.0.0"
@@ -17865,7 +18330,7 @@ __metadata:
languageName: node
linkType: hard
-"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.1":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.1":
version: 1.2.1
resolution: "source-map-js@npm:1.2.1"
checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3
@@ -17906,6 +18371,13 @@ __metadata:
languageName: node
linkType: hard
+"source-map@npm:^0.7.3":
+ version: 0.7.6
+ resolution: "source-map@npm:0.7.6"
+ checksum: 10/c8d2da7c57c14f3fd7568f764b39ad49bbf9dd7632b86df3542b31fed117d4af2fb74a4f886fc06baf7a510fee68e37998efc3080aacdac951c36211dc29a7a3
+ languageName: node
+ linkType: hard
+
"source-map@npm:^0.7.4":
version: 0.7.4
resolution: "source-map@npm:0.7.4"
@@ -18327,7 +18799,7 @@ __metadata:
languageName: node
linkType: hard
-"style-loader@npm:^4.0.0":
+"style-loader@npm:4.0.0, style-loader@npm:^4.0.0":
version: 4.0.0
resolution: "style-loader@npm:4.0.0"
peerDependencies:
@@ -18359,6 +18831,21 @@ __metadata:
languageName: node
linkType: hard
+"stylus@npm:^0.62.0":
+ version: 0.62.0
+ resolution: "stylus@npm:0.62.0"
+ dependencies:
+ "@adobe/css-tools": "npm:~4.3.1"
+ debug: "npm:^4.3.2"
+ glob: "npm:^7.1.6"
+ sax: "npm:~1.3.0"
+ source-map: "npm:^0.7.3"
+ bin:
+ stylus: bin/stylus
+ checksum: 10/a2d975e619c622a6646fec43489f4a7d0fe824e5dab6343295bca381dd9f1ae9f9d32710c0ca28219eebeb1609448112ba99a246c215824369aec3dc4652b6cf
+ languageName: node
+ linkType: hard
+
"superagent@npm:^10.3.0":
version: 10.3.0
resolution: "superagent@npm:10.3.0"
@@ -19071,7 +19558,7 @@ __metadata:
languageName: node
linkType: hard
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.3, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.3, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
version: 2.8.1
resolution: "tslib@npm:2.8.1"
checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7
@@ -19237,6 +19724,35 @@ __metadata:
languageName: node
linkType: hard
+"typescript-plugin-css-modules@npm:5.2.0":
+ version: 5.2.0
+ resolution: "typescript-plugin-css-modules@npm:5.2.0"
+ dependencies:
+ "@types/postcss-modules-local-by-default": "npm:^4.0.2"
+ "@types/postcss-modules-scope": "npm:^3.0.4"
+ dotenv: "npm:^16.4.2"
+ icss-utils: "npm:^5.1.0"
+ less: "npm:^4.2.0"
+ lodash.camelcase: "npm:^4.3.0"
+ postcss: "npm:^8.4.35"
+ postcss-load-config: "npm:^3.1.4"
+ postcss-modules-extract-imports: "npm:^3.0.0"
+ postcss-modules-local-by-default: "npm:^4.0.4"
+ postcss-modules-scope: "npm:^3.1.1"
+ reserved-words: "npm:^0.1.2"
+ sass: "npm:^1.70.0"
+ source-map-js: "npm:^1.0.2"
+ stylus: "npm:^0.62.0"
+ tsconfig-paths: "npm:^4.2.0"
+ peerDependencies:
+ typescript: ">=4.0.0"
+ dependenciesMeta:
+ stylus:
+ optional: true
+ checksum: 10/4101b4f5d28adb8dd3d0bcb7d9428ec121339c9080ca8718ac1e62223e6450ffe8f74e0f0854bee48dc50c3dd64bbefe1e66420150e50790f042a3571b64114d
+ languageName: node
+ linkType: hard
+
"typescript@npm:5.9.3":
version: 5.9.3
resolution: "typescript@npm:5.9.3"
@@ -20462,7 +20978,7 @@ __metadata:
languageName: node
linkType: hard
-"yaml@npm:^1.10.0":
+"yaml@npm:^1.10.0, yaml@npm:^1.10.2":
version: 1.10.3
resolution: "yaml@npm:1.10.3"
checksum: 10/e2ef2feb92c708138f016c69777a0f1e45f6d3c5e7cbcda30807a98a37eda2e008bd4fa57352b043c65245a4c799d0c99d1f9b3425de40e70929e26d2ea38215