fix: prevent breaking change to topper API.

Financial-Times · Jan 23, 2025 · 8e6faed · 8e6faed
1 parent f2effbc
commit 8e6faed
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/components/o-topper/src/scss/_mixins.scss b/components/o-topper/src/scss/_mixins.scss
@@ -277,6 +277,7 @@
 
 @mixin _oTopperColors($colors) {
 	@each $color in $colors {
+		$color: if($color == 'matisse', 'o3-color-palette-#{$color}-blue', 'o3-color-palette-#{$color}');
 		.o-topper--color-#{$color} {
 			@include _oTopperColor($color);
 		}

diff --git a/components/o-topper/src/scss/_variables.scss b/components/o-topper/src/scss/_variables.scss
@@ -10,16 +10,16 @@ $o-topper-is-silent: true !default;
 /// @prop {List} - colours available to editorial in methode for the background
 /// @access private
 $_o-topper-colors: (
-	'o3-color-palette-white',
-	'o3-color-palette-black',
-	'o3-color-palette-claret',
-	'o3-color-palette-oxford',
-	'o3-color-palette-paper',
-	'o3-color-palette-slate',
-	'o3-color-palette-wheat',
-	'o3-color-palette-crimson',
-	'o3-color-palette-sky',
-	'o3-color-palette-matisse-blue'
+	'white',
+	'black',
+	'claret',
+	'oxford',
+	'paper',
+	'slate',
+	'wheat',
+	'crimson',
+	'sky',
+	'matisse'
 );
 
 /// When adding a new theme update the README

diff --git a/components/o-topper/src/scss/themes/_deep-landscape.scss b/components/o-topper/src/scss/themes/_deep-landscape.scss
@@ -28,6 +28,7 @@
 
 
 	@each $color-name in $colors {
+		$color-name: if($color-name == 'matisse', 'o3-color-palette-#{$color-name}-blue', 'o3-color-palette-#{$color-name}');
 		&.o-topper--color-#{$color-name} {
 			$background: oPrivateFoundationGet($color-name);
 			$foreground: oPrivateColorsGetTextColor($background, $opacity: 100);

diff --git a/components/o-topper/src/scss/themes/_deep-portrait.scss b/components/o-topper/src/scss/themes/_deep-portrait.scss
@@ -34,6 +34,7 @@
 		}
 
 		@each $color-name in $colors {
+			$color-name: if($color-name == 'matisse', 'o3-color-palette-#{$color-name}-blue', 'o3-color-palette-#{$color-name}');
 			&.o-topper--color-#{$color-name} {
 				.o-topper__image-caption {
 					$background: oPrivateFoundationGet($color-name);