How to define cssVar in Recipes ?

[hilodfulaidien]

Please Delete This Post!

Orignal Version：

export const buttonIconStyle = cva({
  base: {
     ......
  },
  variants: {
    size: {
      small: {     
          iconSpacing: 'xs',  //  4px
      },
      medium: {
          iconSpacing: 'sNudge',   //  6px
      },
      large: {
         iconSpacing: 'sNudge',  //  6px
      },
    },
    iconPosition: {
      before: {
          marginRight: ,  'sNudge'//  Bad, fixed at 6px
      },
      after: {
          marginLeft: ,  'sNudge' //   Bad, fixed at 6px
      },
    },
  },
  defaultVariants: {
       size: "medium",
  },
});

Orignal :

befor ( marginRight: 6px ) + small, befor ( marginRight: 6px ) + medium

But I want “marginRight” to change with “size” :

befor ( marginRight value is 4px ) + small, befor ( marginRight value is 6px ) + medium

Changed Version：

const iconSpacingVar = "--pui-btn__icon-spacing"; //  This cssVar will be changed with "size".

export const buttonIconStyle = cva({
  base: {
     ......
  },
  variants: {
    size: {
      small: {     
          `${iconSpacingVar}`: 'xs',  // error 1, red wave
      },
      medium: {
          `${iconSpacingVar}`: 'sNudge',   // error 2, red wave 
      },
      large: {
         `${iconSpacingVar}`: 'sNudge',  // error 3, red wave
      },
    },
    iconPosition: {
      before: {
          marginRight: iconSpacingVar,  //  no red wave
      },
      after: {
          marginLeft: iconSpacingVar,  //   no red wave
      },
    },
  },
  defaultVariants: {
       size: "medium",
  },
});

Question 1, how do I modify error 1，2，3?

Bad try Version, Every "size" was repeated.

variants: {
    size: {
      smallBefore: {     
          marginRight: 'xs',  //  4px
      },
      smallAfter: {     
          marginLeft: 'xs',  //  4px
      },
      mediumBefore: {
          marginRight: 'sNudge',   //  6px
      },
      mediumAfter: {
          marginLeft: 'sNudge',   //  6px
      },
      largeBefore: {
         marginRight: 'sNudge',   //  6px
      },
      largeAfter: {
         marginRight: 'sNudge',   //  6px
      },
    },
  },

[anubra266]

@hilodfulaidien Could you explain what exactly the issue is. This is quite vague

[hilodfulaidien]

The problem has been solved by using "compound variants".