With a Styled Components Theme, how to a specify a design system's colors?

Question

In my styled components theme, I'm trying to do the following:

theme.js

const colors = {    
  purples: {
    60: '#123123',
    50: '#123123',
    40: '#123123',
  },

  blues: {
    60: '#123123',
    50: '#123123',
    40: '#123123',
  },

  // Primary defined here to be easier
  purple: purples[50],
  blue: blues[50]

};

const theme = {
  colors,
};

export default theme;

I'm getting a blues is not defined error. Am I doing this right? How can I get my colors defined using styled components within the theme file?

Goal is for this to work:

  background: ${(props) => props.theme.colors.purple};
  background: ${(props) => props.theme.colors.purples[40};

Answer 1

You have:

const colors = {
  // Primary defined here to be easier
  purple: purples[50],
  blue: blues[50]
  ...

but blues hasn't been defined yet. You need something like:

const purples = {
  60: '#123123',
  50: '#123123',
  40: '#123123',
},

const blues = {
  60: '#123123',
  50: '#123123',
  40: '#123123',
},

const colors = {
  purple: purples[50],
  blue: blues[50],
};

const theme = {
  colors,
};

export default theme;

Or alternatively, you can do the above but export each thing individually:

export const purples = {
  60: '#123123',
  50: '#123123',
  40: '#123123',
},

export const blues = {
  60: '#123123',
  50: '#123123',
  40: '#123123',
},

export const theme = {
  purple: purples[50],
  blue: blues[50],
};