Using an alias key name for space

[francinen]

Hello! Our design team is rolling out a new naming convention for our design tokens. One of the changes requires space tokens to use the spacing prefix instead of space. I'm trying to configure an alias based on the code snippet in your documentation, but it hasn't been successful for me yet.

Is there anything we're missing in the way we're configuring our alias?

const config = {
   spacing: {
        property: 'spacing',
        scale: 'space',
   }
}

config.space = config.spacing;

const customSystemProps = system(config)

// Elsewhere in the module, the customSystemProps is composed along with other functions imported from `styled-system`
const styleFunctions = [
  background,
  border,
  color,
  flexbox,
  layout,
  position,
  shadow,
  typography,
  customSystemProps,
];

const styleProps = compose(...styleFunctions);

export const Base: React.FunctionComponent<BoxProps> = styled('div', {
  shouldForwardProp,
})({ boxSizing: 'border-box' }, (props: BaseProps) => ({
  ...styleProps(props),
 // etc.
})) as React.FunctionComponent<BoxProps>;

[francinen]

I was a little confused by the example snippet in your documentation, so I also tried config.spacing = config.space but that didn't work either:

const config = {
   space: {
        property: 'space',
        scale: 'space',
   }
}

config.spacing = config.space;

const customSystemProps = system(config)

[francinen]

I have a feeling the reason it’s not working is because space doesn’t map to a CSS property. Does these mean we'll have to pass a config for all margin and padding properties?

  margin: {
    property: 'margin',
    scale: 'spacing',
    transform: getMargin,
    defaultScale: defaults.space,
  },

Is this approach possible? I don't think getMargin is exported, so is it possible to just change the scale of those properties?

[mgallagher]

It might help to know what the intended API is for your components. Based on your first example it looks like the system() utility is being used to create a style prop that sets a CSS attribute called "spacing" (which isn't a thing).

If your goal is to have these new tokens be used as the argument for the style props like margin and padding, you can use an object for theme.space :

const theme = {
 // We prefer the array at our organization
 // space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
 space: {
   spacing0: 0,
   spacing1: 4,
   spacing2: 8,
   ...
 }
 ...
}

<Box
 mb={"spacing1")
 p={"spacing3"}
 // mb={1}
 // p={4}
/>

Hope that helps some.