diff --git a/components/ft-concept-button/main.scss b/components/ft-concept-button/main.scss index 03ad3ddef8..9bc6b4761f 100644 --- 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 index 5d2a92b407..0a787b79f1 100644 --- 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