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>
    );
};