// @flow
import type { ThemeProps } from '../../../types';
import { getPaletteColor } from '../../../mixins/branding/branding.css-rules';
import type { SpanProps } from './span.proptypes';
import type { TypographyProps } from '../../../mixins/typography/typography.proptypes';

export const getForegroundColor = ({
  theme,
  colorName,
}: {|
  ...SpanProps,
  ...ThemeProps,
|}) => (colorName ? getPaletteColor(colorName)({ theme }) : undefined);

export const getSpanFontSize = ({
  theme,
  fontSize,
}: {|
  ...ThemeProps,
  ...TypographyProps,
|}) =>
  fontSize && theme.typescale[fontSize] ? theme.typescale[fontSize] : undefined;

export const getSpanFontFamily = ({
  theme,
  face,
}: {|
  ...ThemeProps,
  ...TypographyProps,
|}) => (face && theme.fonts[face] ? theme.fonts[face] : undefined);

export const getSpanFontWeight = ({ bold = false }: TypographyProps) =>
  bold ? '700' : undefined;
