Support and Choose buttons had wrong color contrast on dark mode

Signed-off-by: Johnn Mis <v-jmis@expediagroup.com>

packages/core/src/components/SupportButton/SupportButton.tsx

@@ -43,6 +43,9 @@ const useStyles = makeStyles(theme => ({
     minWidth: 260,
     maxWidth: 400,
   },
+  primary: {
+    color: theme.palette.primary.light,
+  },
 }));
 
 const SupportIcon = ({ icon }: { icon: string | undefined }) => {
@@ -98,7 +101,7 @@ export const SupportButton = ({ children }: PropsWithChildren<Props>) => {
     <Fragment>
       <Button
         data-testid="support-button"
-        color="primary"
+        className={classes.primary}
         onClick={onClickHandler}
       >
         <HelpIcon className={classes.leftIcon} />

packages/theme/src/themes.ts

@@ -104,6 +104,7 @@ export const darkTheme = createTheme({
     primary: {
       main: '#2E77D0',
     },
+    tonalOffset: 0.45,
     banner: {
       info: '#2E77D0',
       error: '#E22134',

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -40,6 +40,9 @@ const useStyles = makeStyles({
     '-webkit-line-clamp': 10,
     '-webkit-box-orient': 'vertical',
   },
+  primary: {
+    color: ({ palette }: any) => palette.primary.light,
+  },
 });
 
 export type TemplateCardProps = {
@@ -85,7 +88,7 @@ export const TemplateCard = ({
         <Box className={classes.description}>{description}</Box>
       </CardContent>
       <CardActions>
-        <Button color="primary" to={href}>
+        <Button className={classes.primary} to={href}>
           Choose
         </Button>
       </CardActions>