@sinchsmb/ui-kit/src/theme/font.ts

UI kit for SinchSMB frontend

import get from 'lodash/get';

import { FontFamilyToken, FontFamilyTokenRef, PropsWithTheme } from './types';

/**
 * Returns font that can be used inside styled-component.
 *
 * ```tsx
 * import styled from 'styled-components/macro';
 * import { typography } from '../theme';
 *
 * const StyledDiv = styled.div`
 *   font-family: ${font('body')};
 * `;
 * ```
 */
export function font(name: FontFamilyTokenRef) {
  return (props: PropsWithTheme): FontFamilyToken => get(props.theme, name.split('/'));
}