Adding "fill" to keys?

Hello

Is it possible to add extra css properties like “fill” so that they are recognised by the color transformation when using variants.

For example I have a token for a button

primary: {
   ...shared,
   color: "PrimaryWhite",
   bg: "PrimaryBlack.0",
   ":hover": {
     bg: "PrimaryBlack.1"
   },
   "path" : {
     fill: 'PrimaryWhite'
   }
 }

Which when styled with emotion

const Button = styled.button(
    props => css(props.theme.buttons[props.kind])
);

Which on the element returns the css :

.css-1p77o0p-Button {
    color: #fff;
    background-color: #000;
}

.css-ofzrbh-Button path {
    fill: PrimaryWhite;
}

I had a look https://styled-system.com/api#system but haven’t had any luck using it.

Any help appreciated!

[jxnblk]

The fill and stroke properties should now be supported in the latest version of @styled-system/css. You might need to update dependencies in your lock file to see the changes

[jxnblk]

Going to keep this open because I think support the fill property would be a good addition