Update default theme for new plugins

frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -20,7 +20,7 @@ const ExampleComponent: FC<{}> = () => {
   const classes = useStyles();
 
   return (
-    <Page theme={theme.home}>
+    <Page theme={theme.tool}>
       <div className={classes.mainContentArea}>
         <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle"></Header>
         <Grid

frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -73,7 +73,7 @@ export const DenseTable: FC<DenseTableProps> = ({ users }) => {
 
 const ExampleFetchComponent: FC<{}> = () => {
   const { value, loading, error } = useAsync(async (): Promise<User[]> => {
-    const response = await fetch('https://randomuser.me/api/?results=100');
+    const response = await fetch('https://randomuser.me/api/?results=20');
     const data = await response.json();
     return data.results;
   }, []);

frontend/packages/core/src/layout/Page/PageThemeProvider.ts

@@ -11,8 +11,9 @@ export const gradients = {
   violetPeach: 'linear-gradient(44deg, #B39AC8 0%, #FCCBD3 100%)',
   violetGreen: 'linear-gradient(44deg, #4302F4 0%, #C3EFC8 100%)',
   purple: 'linear-gradient(-90deg, #a186bd 0%, #7c5c92 100%)',
-  tpm: 'linear-gradient(-137deg, #00FFF2 0%, #035355 100%)',
-  royalBlue: 'linear-gradient(45deg, #000044 0%, #0000DD 61.47%, #0033DD 74%, #4B80D4 100%)',
+  eveningSea: 'linear-gradient(-137deg, #00FFF2 0%, #035355 100%)',
+  royalBlue:
+    'linear-gradient(45deg, #000044 0%, #0000DD 61.47%, #0033DD 74%, #4B80D4 100%)',
   grey: 'linear-gradient(45deg, #111111 0%, #777777 100%)',
   sunset: 'linear-gradient(148deg, #cf8022 0%, #4e6ec7 100%)',
   sky: 'linear-gradient(135deg, #69B9FF 0%, #ACCEEC 100%)',
@@ -41,7 +42,17 @@ export const theme = {
   },
   documentation: {
     activeNavLinkColor: '#04c2ba',
-    gradient: gradients.tpm,
+    gradient: gradients.eveningSea,
     burstShape: null,
   },
-};
+  tool: {
+    activeNavLinkColor: '#04c2ba',
+    gradient: gradients.purpleBlue,
+    burstShape: null,
+  },
+  library: {
+    activeNavLinkColor: '#B39AC8',
+    gradient: gradients.sunset,
+    burstShape: null,
+  },
+};