Components specific utils

[goatyeahh]

I find the concept of utils very powerful but I wonder if components specific utils are a use case 🤔

For example in the current Radix UI - Design System/button , could you write a component specific util to avoid code duplication for color variants? Is this a bad idea?

export const { styled, css } = createStyled({
  utils: {
    buttonColor: (config) => (value) => ({
      backgroundColor: `$${value}100`,
      boxShadow: `inset 0 0 0 1px $colors$${value}600`,
      color: `$${value}900`,
      "@media (any-hover: hover)": {
        "&:hover": {
          boxShadow: `inset 0 0 0 1px $colors$${value}700`,
        },
      },
      "&:active": {
        backgroundColor: `$${value}200`,
        boxShadow: `inset 0 0 0 1px $colors$${value}700`,
      },
      "&:focus": {
        boxShadow: `inset 0 0 0 1px $colors$${value}700, 0 0 0 1px $colors$${value}700`,
      },
      '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
        backgroundColor: `$${value}300`,
        boxShadow: `inset 0 0 0 1px $colors$${value}700`,
      },
    }),
  },
})

const Button = styled("button", {
  variants: {
    blue: {
      buttonColor: "blue",
    },
    green: {
      buttonColor: "green",
    },
  },
})

I understand that code duplication in the case of UI can be a good idea but I could see a use case for a LabelCloseButton with many color variations.