Replacing overall instead of granular colors

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

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

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

packages/theme/src/themes.ts

@@ -102,12 +102,11 @@ export const darkTheme = createTheme({
       },
     },
     primary: {
-      main: '#2E77D0',
+      main: '#8CB4E5',
     },
     secondary: {
       main: '#FF88B2',
     },
-    tonalOffset: 0.45,
     banner: {
       info: '#2E77D0',
       error: '#E22134',

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

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