apphouse/dist/styles/getLayoutStyles.ts

Component library for React that uses observable state management and theme-able components.

import { setAlpha } from '../utils/color/setAlpha';
import { BaseStyleProps } from './baseStyles.interface';
import { LayoutStyles } from './defaults/themes.interface';
export const backgroundForTransparency = `linear-gradient(135deg, transparent 47.62%, #a7a7a730 47.62%, #a7a7a730 50%, transparent 50%, transparent 97.62%, #a7a7a730 97.62%, #a7a7a730 100%); background-size: 29.70px 29.70px`;
/**
 * @description - Get themed background styles
 * @returns
 */
export const getLayoutStyles = ({ tokens }: BaseStyleProps): LayoutStyles => {
  const { spacings } = tokens;
  return {
    horizontal: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      gridGap: spacings.default,
      flexWrap: 'wrap',
      boxSizing: 'border-box'
    },
    vertical: {
      display: 'flex',
      alignItems: 'flex-start',
      flexDirection: 'column',
      gridGap: spacings.default,
      boxSizing: 'border-box',
      width: '100%'
    },
    overlay: {
      alignItems: 'center',
      backgroundColor: setAlpha('#000', 0.9),
      display: 'flex',
      height: '100%',
      justifyContent: 'center',
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      zIndex: tokens.zIndex.popup,
      boxSizing: 'border-box'
    }
  };
};