apphouse/dist/components/input/input.component.styles.ts

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

import { mergeStyles } from '../..';
import {
  ApphouseTheme,
  InputStyles
} from '../../styles/defaults/themes.interface';
import { getValueWithUnit } from '../../themes/utils/getValueWithUnit';
import {
  InputComponentStyles,
  InputLabelStyles,
  InputToggleTypeButtonStyles
} from './input.styles.interface';

export const getComponentInputLabelStyles = (
  theme: ApphouseTheme,
  variant: keyof InputStyles
): InputLabelStyles => {
  const { tokens, colors } = theme;
  let fontSize = tokens.fontSize.standard;
  if (variant === 'xl') {
    fontSize = tokens.fontSize.title;
  } else if (variant === 'l') {
    fontSize = tokens.fontSize.title;
  } else if (variant === 's') {
    fontSize = tokens.fontSize.small;
  }
  return {
    text: {
      color: 'inherit',
      fontFamily: tokens.fontFamily.default,
      fontSize,
      fontWeight: 600
    },
    required: {
      color: colors.error,
      marginLeft: tokens.spacings.xs
    }
  };
};

export const getComponentInputStyles = (
  theme: ApphouseTheme,
  variant: keyof InputStyles
): InputComponentStyles => {
  const { tokens, styles } = theme;
  const inputStyles = styles.input[variant];
  return {
    container: {
      display: 'flex',
      flexDirection: 'column',
      gap: tokens.spacings.s
    },
    input: mergeStyles(inputStyles, { color: 'inherit' })
  };
};

export const getComponentButtonInputToggleStyles = (
  theme: ApphouseTheme,
  size: keyof InputStyles
): InputToggleTypeButtonStyles => {
  const { styles } = theme;
  const inputStyles = styles.input[size];
  const padding = getValueWithUnit(
    parseInt(inputStyles?.paddingTop) / 1.5,
    'px'
  );
  // here we make the button paddings match the input paddings
  return {
    wrapper: {
      position: 'absolute',
      top: 0,
      right: 0,
      zIndex: 1
    },
    button: {
      ...styles.button.tertiary,
      padding: padding,
      paddingTop: padding,
      paddingBottom: padding,
      paddingLeft: padding,
      paddingRight: padding
    }
  };
};