apphouse/dist/components/common/feedback/feedback.styles.ts

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

import { CSSProperties } from 'glamor';
import { Elevation } from '../../../styles/defaults/elevation.styles';
import { UseStyles } from '../../../styles/defaults/styles.interface';
import {
  ThemeColors,
  ApphouseTheme
} from '../../../styles/defaults/themes.interface';
import { mergeStyles } from '../../../styles/mergeStyles';

export interface FeedbackStyle {
  btnClose: CSSProperties;
  container: CSSProperties;
  details: CSSProperties;
  icon: CSSProperties;
  iconError: CSSProperties;
  iconSuccess: CSSProperties;
  iconWarning: CSSProperties;
  spinner: CSSProperties;
  text: CSSProperties;
  colors: ThemeColors;
}

function getFeedbackStyles(theme: ApphouseTheme): FeedbackStyle {
  const { colors, tokens, styles } = theme;
  const StyleContainer = {
    backgroundColor: colors.surface,
    borderRadius: '5px',
    display: 'grid',
    maxWidth: '400px',
    gridTemplateColumns: '1fr auto',
    gridGap: tokens.spacings.default,
    marginTop: tokens.spacings.default,
    padding: tokens.spacings.default,
    ...Elevation.depth3
  };
  const StyleIcon = {
    fontSize: tokens.iconSize.m,
    marginRight: tokens.spacings.default
  };
  const StyleSpinner = {
    marginRight: tokens.spacings.default,
    animationDuration: '1s'
  };
  const StyleText = {
    fontSize: tokens.fontSize.standard,
    fontWeight: tokens.fontWeight.bold,
    marginRight: tokens.spacings.s
  };
  const StyleDetails = {
    fontWeight: tokens.fontWeight.standard,
    marginRight: tokens.spacings.s
  };
  const StyleBtnClose = {
    ...styles.button.clear,
    padding: 0
  };
  const componentStyles: FeedbackStyle = {
    container: StyleContainer,
    icon: StyleIcon,
    spinner: StyleSpinner,
    text: StyleText,
    iconError: {},
    iconSuccess: {},
    details: StyleDetails,
    iconWarning: {},
    btnClose: StyleBtnClose,
    colors
  };

  return componentStyles;
}

export function useFeedbackStyles(styles: UseStyles<FeedbackStyle>) {
  const componentStyles = getFeedbackStyles(styles.theme);
  return mergeStyles(componentStyles, styles?.overwrites);
}