How to use the css.colors.lightGray function in css

pageLinks.push(
        <li style="{{">
          {title}
          
            
              
            
            
              
            
          
        </li>
      );
    }
  });

marginBottom: 0,
            fontFamily: fonts.tertiary,
            fontWeight: fonts.xThin,
          }}>
          {post.title}
        

        
          
            
          
          
            
          
        

        <div>
        

        
          
        

        
          </div>

import React, { PropTypes } from 'react';
import { Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import { StyleSheet, css } from 'aphrodite';
import { colors, fonts } from 'css';

const sx = StyleSheet.create({
  active: {
    color: colors.black,
  },
  base: {
    fontFamily: fonts.secondary,
    fontWeight: fonts.xThin,
    color: colors.lightGray,
    textDecoration: 'none',
    fontSize: fonts.nav,
    ':hover': {
      color: colors.black,
    }
  }
});

function NavLink({to, children}) {
  return (
    
      {children}

import React, { PropTypes } from 'react';
import moment from 'moment';
import { colors, fonts } from 'css';

const sx = {
  color: colors.lightGray,
  fontSize: fonts.small,
};

function Date({ time }) {
  return (
    <span style="{sx}">
      {moment(time).format('MMM Do, YYYY')}
    </span>
  );
}

Date.propTypes = {
  time: PropTypes.string,
};
export default Date;