apphouse/dist/styles/getButtonStyles.ts

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

import { BaseStyleProps } from '../styles/baseStyles.interface';
import { ButtonStyleVariant } from '../styles/defaults/themes.interface';
import { getSelectCustomStyle } from '../styles/getSelectCustomStyle';

export const getButtonStyles = ({
  colors,
  tokens
}: BaseStyleProps): ButtonStyleVariant => {
  const { spacings, radius } = tokens;

  const disabled = {
    cursor: 'not-allowed'
  };

  const typography = {
    fontWeight: tokens.fontWeight.bold,
    fontSize: tokens.fontSize.standard
  };

  const layout = {
    alignItems: 'center',
    cursor: 'pointer',
    display: 'flex',
    gridGap: spacings.default,
    border: `1px solid`,
    borderColor: 'transparent',
    textAlign: 'center'
  };

  const standardStyles = {
    ...layout,
    ...typography,
    cursor: 'pointer'
  };

  const brandButton = {
    ...standardStyles,
    backgroundColor: colors.brand,
    borderColor: 'transparent',
    borderRadius: radius.default,
    color: colors.onBrand
  };

  const primaryButton = {
    ...standardStyles,
    backgroundColor: colors.onPrimary,
    borderRadius: radius.default,
    color: colors.primary
  };

  const destructiveButton = {
    ...standardStyles,
    backgroundColor: colors.error,
    borderColor: 'transparent',
    border: tokens.borderWidth.none,
    borderRadius: radius.default,
    color: colors.onError
  };

  const secondaryButton = {
    ...standardStyles,
    backgroundColor: 'transparent',
    color: colors.onPrimary,
    borderColor: colors.onPrimary,
    borderRadius: radius.default
  };

  const tertiaryButton = {
    ...standardStyles,
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderRadius: radius.default,
    color: colors.onPrimaryInverse_70,
    textDecoration: 'underline'
  };
  const tabButton = {
    padding: spacings.default,
    color: colors.primary,
    backgroundColor: colors.onPrimary,
    border: tokens.borderWidth.none,
    borderTopRightRadius: radius.default,
    borderTopLeftRadius: radius.default,
    fontWeight: tokens.fontWeight.bold
  };

  const clearButton = {
    ...standardStyles,
    background: 'transparent',
    borderRadius: radius.default,
    color: colors.onPrimary,
    textDecoration: 'none',
    transition: 'color 0.2s ease-in-out',
    ':hover': {
      color: colors.brand
    }
  };

  const brandClearButton = {
    ...standardStyles,
    background: 'transparent',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderRadius: radius.default,
    color: colors.brand,
    textDecoration: 'none',
    ':hover': {
      color: colors.brand
    },
    ':disabled': {
      ...disabled
    }
  };

  const buttonSelect = {
    ...getSelectCustomStyle(colors.onPrimary, 'm'),
    /*** our custom styles */
    backgroundColor: 'transparent',
    borderRadius: radius.default,
    color: 'inherit',
    borderColor: 'inherit',
    paddingLeft: spacings.m,
    fontWeight: tokens.fontWeight.bold
  };

  return {
    brand: brandButton,
    primary: primaryButton,
    secondary: secondaryButton,
    tertiary: tertiaryButton,
    select: buttonSelect,
    tab: tabButton,
    clear: clearButton,
    brandClear: brandClearButton,
    destructive: destructiveButton
  };
};