Ascira-design-system NPM

Theme options

Entry

You can override global theme settings from base material ui theme plus our list.

Work with sub module

(en) For know how update library as sub module you can read this article
(ru) Sub modules

Add to your project

git submodule add https://bitbucket.org/globaltechmakers/ascira-design-system/src/master/

Update submodule

git submodule update --remote

Add UI system to your project

Festival you should read official guide. After that read block about correct implementation below.

For correct work of UI system

You should add Providers to your App.js, like on example: All info about that providers you can find on official sites I18 and Mui.

activeTheme === defaultAsciraMainTheme || {...defaultAsciraMainTheme, ...{yourOverrideProp: 'value'}}

import { 
  I18nextProvider,
  MuiThemeProvider,
  MuiStylesProvider,
  StyledCompThemeProvider,
  MuiCssBaseline,
  AsciraGlobalStyles,
  defaultAsciraMainTheme,
  createAdsDefaultLightMuiTheme,
  createAdsDefaultDarkMuiTheme
} from 'ascira-design-system';

const customThemeSettings = {}; // from Mui + our custom config
const activeTheme = createAdsDefaultLightMuiTheme(customThemeSettings);

<I18nextProvider i18n={i18n}>
  <MuiThemeProvider theme={activeTheme}>
    <MuiStylesProvider injectFirst={true}>
      <StyledCompThemeProvider theme={activeTheme}>
        <MuiCssBaseline/>
        <AsciraGlobalStyles />
        /* <Routes /> */
      </StyledCompThemeProvider>
    </MuiStylesProvider>
  </MuiThemeProvider>
</I18nextProvider>

Dependency ejection

You can add your dp for translation and logging.

TranslationService - fn should be name like - 'TranslationService';
LoggerService - fn should be name like - 'LoggerService';

Example of use

We also provide default TranslationI18nService dependencyInjection.use(TranslationService.name, TranslationI18nService); dependencyInjection.use(LoggerService.name, LoggerService);

Material-UI comes with two theme variants, light (the default) and dark.

You can make the theme dark by setting type to dark. While it's only a single property value change, internally it modifies the value of the following keys:

palette.text
palette.divider
palette.background
palette.action

Example of use custom props in theme

padding:${props.size && theme.adsCustom.button.sizeprops.size.padding};

Overriding styles

Customizing components

You can override the style of the component thanks to one of these customization points:

With a rule name of the classes object prop
With a global class name
With a theme and an overrides property

Example of rewrite styles by Mui override config

overrides: {
  MuiTypography: {
    h1: marginsHeading,
    h2: marginsHeading,
    h3: marginsHeading,
    h4: marginsHeading,
    h5: marginsHeading,
    subtitle1: marginsParagraph,
    subtitle2: marginsParagraph
  },
  MuiButton: {
    root: {
      background: 'blue',
      '&.MuiButton-containedPrimary': {
        background: 'green'
      },
    }
  }
}

Understanding theme css customization (required)

Example of wright styled styles

export default Reset.extend`
  height: ${({ theme }) => theme.form.textareaHeight};
  border-width: ${({ theme }) => theme.form.borderWidth};
  border-style: solid;
  border-color: ${({ isInvalid, theme }) => isInvalid ? theme.form.borderColorInvalid : theme.form.borderColor};
  color: ${({ theme }) => theme.form.color};
`;

export const artBlock = styled('div')`
  ${({ theme, ...props }) => css`
    height: ${theme.form.textareaHeight};
    border-width: ${theme.form.borderWidth};
    border-style: solid;
    border-color: ${props.isInvalid ? theme.form.borderColorInvalid : theme.form.borderColor};
    color: ${theme.form.color};
  `}
`;

export const Button = styled(CoreButton)`
  background-image: ${({ theme }) => `url(${theme.customKey})`};
  color: ${({ theme }) => theme.palette.secondary};
`;