Ability to choose a theme color from theme array of specific color range

[yairEO]

My theme code follows the standards:

Theme:

const baseColors = {
    grays: ['#9B9B9B', '#DEE2E5', '#EFF0F4', '#F7F8FA'],
    reds: ['#D30C2B', '#EF3920'],
    blues: ['#2C304C', '#1A395C', '#6782A4'],
}

const colors : {
	...baseColors,
	primary: baseColors.reds[0],
    secondary: baseColors.blues[1]
}

// ...more code...

export default {
    colors,
    fontSizes,
    fontWeights,
    shadows,
    space,
    radii,
}

I would like to access a specific "blue" color from xstyled:

Basic use-case:

import styled from '@xstyled/styled-components'

const MyComp = styled.div`
	background: grays[3]; // <- xStyled should parse this as: theme.colors.grays[3]
`

I cannot possibly give alias names to all my color, in reality I have many and naming them will be more confusing than accessing an Array index, since colors arrays are sorted by darker to lighter, and it's obvious to developers in the team which gray is lighter or darker by using an index, instead of creating alias names such as:

const colors : {
	...baseColors,
	primary: baseColors.reds[0],
    secondary: baseColors.blues[1],
    gray1: baseColors.grays[1],  // <- I don't want to make these only for xStyled
    gray2: baseColors.grays[2],
    gray3: baseColors.grays[3],
}

[gregberge]

Hello @yairEO, you have to use the "dot syntax":

background: grays.3;

[good-idea]

Just came here with the same question. I didn't see this in the docs -- I'd suggest adding it!

[gregberge]

Feel free to submit a PR to update the doc!

[yairEO]

Not working 😞:

svg {
  fill: blues.4;
}

Working:

fill: ${({ theme }) => theme.colors.blues[4]};

[gregberge]

fill is not yet supported, we have to add it. Someone would like to try in a PR?

[gregberge]

See #45