Example of css functions/ mappings in JS

style-fns.js

export function fontPrimary () {
  return 'Source Sans Pro, sans-serif';
}

export function fontSecondary () {
  return 'Lato, sans-serif';
}

export function textStyle (style) {
  if (style === 'upper') {
    return 'text-transform: uppercase;';
  }

  return '';
}

export function fontSize (typeSize = 'body, default') {
  const type = typeSize.split(', ')[0];
  const size = typeSize.split(', ')[1];

  const map = {
    body: {
      'xx-small': '0.625rem',
      'x-small': '0.75rem',
      'small': '0.875rem',
      'default': '1rem',
      'large': '1.125rem',
      'x-large': '1.5rem',
      'xx-large': '1.875rem'
    },

    title: {
      'x-small': 12,
      'small': 16,
      'default': 18,
      'large': 21,
      'x-large': 32,
      'xx-large': 40,
      'jumbo': 60
    }
  };

  return `font-size: ${map[type][size]}`;
}

export function letterSpacing (width = 'default') {
  const map = {
    default: '0rem',
    thin: '0.03rem',
    wide: '0.05rem',
    canyon: '0.1rem'
  };

  return `letter-spacing: ${map[width]}`;
}

export function fontWeight (weight = 'regular') {
  const map = {
    light: 300,
    regular: 400,
    medium: 500,
    heavy: 600,
    'x-heavy': 700
  };

  return `font-weight: ${map[weight]}`;
}

export function lineHeight (type = 'body', height = 'default') {
  const map = {
    body: {
      'x-small': 0.75,
      'small': 1.2,
      'default': 1.5,
      'large': 1.875,
      'x-large': 2
    },

    title: {
      'x-small': 1,
      'small': 1.1,
      'default': 1.5,
      'medium': 1.875,
      'large': 2
    }
  };

  return `line-height: ${map[type][height]}`;
}

const spacingFactor = 8;
const baseFontSize = 16;

function toRem (px) {
  return `${px / baseFontSize}rem`;
}

const pxSpacing = {
  space0: spacingFactor / 2,  // 4
  space1: spacingFactor,      // 8
  space2: spacingFactor * 2,  // 16
  space3: spacingFactor * 3,  // 24
  space4: spacingFactor * 4,  // 32
  space5: spacingFactor * 5,  // 40
  space6: spacingFactor * 6,  // 48

  space8: spacingFactor * 8,  // 64
  space9: spacingFactor * 9,  // 72
  space13: spacingFactor * 13 // 104
};

export function spacing (sp) {
  return toRem(pxSpacing[sp]);
}

export function palette (paletteShade = 'gray, base') {
  const pal = paletteShade.split(', ')[0];
  const shade = paletteShade.split(', ')[1];

  const map = {
    gray: {
      'xx-light': '#F8F8F8',
      'x-light': '#EFEFEF',
      'light': '#d8d8d8',
      'base': '#8f939e',
      'dark': '#777874',
      'x-dark': '#4A4A4A',
      'xx-dark': '#222',

      'slate': '#9094A0',
      'slate-secondary': '#9DA1AE',
      'smoke': '#F5F5F5',
      'smoke-secondary': '#F2F3F4'
    },
    white: {
      'ice': '#F5F9FD',
      'ice-secondary': '#FFF'
    },
    blue: {
      'deep-sea': '#1D293A',
      'deep-sea-secondary': '#2E415C',
      'hydro': '#559DF1',
      'hydro-secondary': '#147FD7'
    },
    green: {
      'lime': '#B6ED76',
      'lime-secondary': '#8FB26C'
    },
    yellow: {
      'turbo': '#E1E43C',
      'turbo-secondary': '#B4B72E'
    },
    orange: {
      'mango': '#F5A623',
      'mango-secondary': '#CD922D'
    },
    red: {
      'copperhead': '#E37979',
      'copperhead-secondary': '#B75F5F'
    }
  };

  return map[pal][shade];
}

export function theme (uiTheme = 'fd-text') {
  const map = {
    error: palette('red, copperhead'),
    warning: '#F5A623',
    normal: '#559DF1',
    success: palette('green, lime-secondary'),
    saving: '#B6ED76',
    info: '#559DF1',
    white: '#FFF',
    transparent: 'rgba(#FFF, 0)',
    disabled: '#8f939e',
    active: palette('green, lime'),
    inactive: palette('gray, light'),
    default: '#559DF1',
    pending: palette('gray, light'),
    fulfilled: '#B6ED76',
    rejected: palette('red, copperhead'),
    'fd-text': palette('gray, dark')
  };

  return map[uiTheme];
}