ui-astra-assets

Testing locally

1. in this file

   • npm i install dependencies

   • npm run build or npm run tsc to build your module

2. in childApp

   • in package.json under dependencies add ui-astra-assets with file:(relativePathToRepo)

     • "ui-astra-assets": "file:../ui-astra-assets",

   • npm i to make sure everything is set up

   • start app npm start

AstraTheme AstraColors

AstraTheme should be used with MuiThemeProvider or when you need specific Material Theme styling

AstraColors can be used for Astra's Branding colors.

Note AstraColor.blue & AstraColor.green are the same as AstraTheme.primary & AstraTheme.secondary

import  *  as  React  from  'react';
import { AstraTheme } from 'ui-astra-assets';
import { MuiThemeProvider } from  '@material-ui/core/styles';
import  App  from  'containers/App';

export  default (props) => {
	return (
		...
			<MuiThemeProvider  theme={AstraTheme}>
				...
					<App  />
				...
			</MuiThemeProvider>
		...
	);
};

import  *  as  React  from  'react';
import { AstraColors, AstraThemes } from 'ui-astra-assets';
import Button from  '@material-ui/core/Button';
import { withStyles } from  '@material-ui/core/styles';

const UglyButton = withStyles(theme => ({
	root: {
		backgroundColor: theme.palette.error.dark,
		color: theme.palette.primary.dark,
	},
}))(Button);

export  default (props) => {
	return (
		// warning very ugly
		<UglyButton
			variant={'contained'}
		>
			Attention!
		</Button>
	);
};

import  *  as  React  from  'react';
import { AstraColors, AstraThemes } from 'ui-astra-assets';
import Button from  '@material-ui/core/Button';

export  default (props) => {
	return (
		// warning very ugly
		<Button
			style={{
				backgroundColor: AstraColors.orange.dark,
				// if you are using AstraTheme to set colors
				// it may be better to use the above example
				color: AstraTheme.palette.primary.light,
			}}
			variant={'contained'}
		>
			Attention!
		</Button>
	);
};