feat: add professional-inverse theme to ft-concept-button (#1738)

Financial-Times · Jul 5, 2024 · 1282927 · 1282927
1 parent fde7feb
commit 1282927
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/components/ft-concept-button/main.scss b/components/ft-concept-button/main.scss
@@ -45,7 +45,14 @@ $_ftConceptButtonThemes: (
 		highlight: oColorsByName('black-80'),
 		pressed-highlight: rgba(oColorsByName('black'), 0.2),
 		disabled: rgba(oColorsByName('black'), 0.5)
-	)
+	),
+	professional-inverse: (
+		background: oColorsByName('mint'),
+		text: oColorsByName('black'),
+		highlight: oColorsByName('mint'),
+		pressed-highlight: rgba(oColorsByName('mint'), 0.15),
+		disabled: rgba(oColorsByName('black'), 0.5)
+	),
 );
 
 @function _ftConceptButtonGetThemeColor($key) {
@@ -126,7 +133,7 @@ $_ftConceptButtonThemes: (
 			@include oNormaliseFocusContentForElementColour(
 				_ftConceptButtonGetThemeColor(background)
 			);
-		};
+		}
 
 		background-color: transparent;
 		border: 1px solid _ftConceptButtonGetThemeColor(background);
@@ -182,6 +189,7 @@ $_ftConceptButtonThemes: (
 		'opinion',
 		'inverse',
 		'monochrome',
+		'professional-inverse',
 	)
 ) {
 	.ft-concept-button__link,

diff --git a/components/ft-concept-button/src/tsx/concept-button.tsx b/components/ft-concept-button/src/tsx/concept-button.tsx
@@ -6,7 +6,13 @@ export interface ConceptButtonProps {
 	// descriptive label for button
 	ariaLabel?: string;
 	// button theme
-	theme?: 'standard' | 'inverse' | 'opinion' | 'monochrome' | 'inverse-monochrome';
+	theme?:
+		| 'standard'
+		| 'inverse'
+		| 'opinion'
+		| 'monochrome'
+		| 'inverse-monochrome'
+		| 'professional-inverse';
 	// button type
 	type?: 'concept' | 'follow';
 	// whether the button is currently pressed