apphouse/dist/styles/getBoxSizedStyles.ts

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

import { CSSProperties } from 'glamor';
import {
  BoxSizeStyles,
  ThemeTokens
} from '../styles/defaults/themes.interface';
import { Unit } from '../types/unit';
import { getValueWithUnit } from '../themes/utils/getValueWithUnit';

/**
 * Box sized styles applies a centered focus text with equal
 * paddings on top, bottom, left, right based on the size
 * @returns CSSProperties
 */
export const getBoxSizedStyles = (
  tokens: ThemeTokens,
  unit: Unit
): BoxSizeStyles => {
  const { spacings, fontSize } = tokens;

  const getBoxPaddings = (variant: keyof BoxSizeStyles) => {
    const value = getValueWithUnit(spacings[variant], unit);
    return {
      // reset padding otherwise it might clash with the box sizing
      padding: undefined,
      paddingLeft: value,
      paddingRight: value,
      paddingTop: value,
      paddingBottom: value
    };
  };

  const getResetMarginBlockStyles = () => {
    return {
      marginBlockEnd: '0px',
      marginBlockStart: '0px',
      marginInlineEnd: '0px',
      marginInlineStart: '0px'
    };
  };

  const defaultStyle: CSSProperties = {
    ...getResetMarginBlockStyles(),
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxSizing: 'border-box'
  };

  const xSmallStyles: CSSProperties = {
    ...defaultStyle,
    fontSize: fontSize.caption,
    ...getBoxPaddings('xs')
  };
  const smallStyles: CSSProperties = {
    ...defaultStyle,
    fontSize: fontSize.small,
    ...getBoxPaddings('s')
  };

  const mediumStyles: CSSProperties = {
    ...defaultStyle,
    fontSize: fontSize.standard,
    ...getBoxPaddings('m')
  };

  const largeStyles: CSSProperties = {
    ...defaultStyle,
    fontSize: fontSize.title,
    ...getBoxPaddings('l')
  };

  const xLargeStyles: CSSProperties = {
    ...defaultStyle,
    fontSize: fontSize.title,
    ...getBoxPaddings('xl')
  };
  return {
    xs: xSmallStyles,
    s: smallStyles,
    m: mediumStyles,
    l: largeStyles,
    xl: xLargeStyles,
    xxl: xLargeStyles,
    xxxl: xLargeStyles
  };
};