apphouse/dist/styles/getInputStyles.ts

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

import { CSSProperties } from 'glamor';
import { InputStyles } from './defaults/themes.interface';
import { BaseStyleProps } from './baseStyles.interface';
import { getBoxSizedStyles } from './getBoxSizedStyles';
import { toRems } from '../utils/units/toRems';

export const DEFAULT_INPUT_HEIGHT = 38;
export const getInputStyles = ({
  colors,
  tokens
}: BaseStyleProps): InputStyles => {
  const { radius, fontFamily, lineHeight } = tokens;

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

  const boxSizedStyles = getBoxSizedStyles(tokens, 'px');

  const defaultStyle: CSSProperties = {
    backgroundColor: colors.surface10,
    border: `1px solid`,
    borderColor: colors.onPrimary_10,
    borderRadius: radius.default,
    color: colors.onPrimary,
    lineHeight: lineHeight?.standard,
    fontFamily: fontFamily.default,
    fontWeight: tokens.fontWeight.bold,
    ...getResetMarginBlockStyles(),
    '::placeholder': {
      color: colors.onPrimary_50
    },
    ':disabled': {
      opacity: 0.3,
      cursor: 'not-allowed',
      Selection: 'none'
    },
    ':focus': {
      transition: '0.5s'
    }
  };

  const xSmallStyles: CSSProperties = {
    ...defaultStyle,
    ...boxSizedStyles.xs,
    lineHeight: toRems(14)
  };
  const smallStyles: CSSProperties = {
    ...defaultStyle,
    ...boxSizedStyles.s,
    lineHeight: toRems(16)
  };

  const mediumStyles: CSSProperties = {
    ...defaultStyle,
    ...boxSizedStyles.m,
    lineHeight: toRems(16)
  };

  const largeStyles: CSSProperties = {
    ...defaultStyle,
    ...boxSizedStyles.l,
    lineHeight: toRems(19)
  };

  const xLargeStyles: CSSProperties = {
    ...defaultStyle,
    ...boxSizedStyles.xl,
    lineHeight: toRems(16)
  };

  return {
    xs: xSmallStyles,
    s: smallStyles,
    m: mediumStyles,
    l: largeStyles,
    xl: xLargeStyles,
    xxl: xLargeStyles,
    xxxl: xLargeStyles
  };
};