Best Practices for Multiple Global Hyperlink Style Variants?

[c-butler-edacious]

Hello! Our app design has multiple style variants for hyperlinks that we reuse across the app. For example, underline or underline on hover only. We were using layerStyles to define the various styles and apply them within the components, as textStyles were too limited. Since updating Panda to the latest (0.27.3), we are now limited as to which CSS properties we can use in layerStyles. We are trying to figure out the correct system for defining resuable and complex global styles that we can apply inline or within a css({}) declaration. What would be a best practice here? Thank you so much!

For example, we were doing something like:

// panda.config.ts
const globalCss = defineGlobalStyles({
  "a": {
    color: "inherit",
    textDecoration: "underline",
    textDecorationColor: "transparent",
    textUnderlineOffset: "2px",
    cursor: "pointer",

    "&:where(button)": {
      lineHeight: "normal", // Note: "normal" acts like "inherit" here. Buttons cannot be { display: inline }. See: https://github.com/w3c/csswg-drafts/issues/3226
    },
  },
});

const layerStyles = defineLayerStyles({
  hyperlinkUnderline: {
    value: {
      textDecorationColor: "inherit",
      transition: "filter var(--durations-normal) var(--easings-out)",

      "&:active, &:hover": {
        filter: "brightness(0.2)",
      },
    },
  },
  hyperlinkHoverUnderline: {
    value: {
      transition:
        "filter var(--durations-normal) var(--easings-out), text-decoration var(--durations-normal) var(--easings-out)",

      "&:active, &:hover": {
        filter: "brightness(0.2)",
        textDecorationColor: "inherit",
      },
    },
  },
  hyperlinkHoverDarken: {
    value: {
      textDecoration: "none",
      transition: "filter var(--durations-normal) var(--easings-out)",

      "&:active, &:hover": {
        filter: "brightness(0.2)",
      },
    },
  },
});

// SomeComponent.tsx
const myCva = cva({
  base: {
    // some base styles
  },
  variants: {
    someCondition: {
      true: {
        layerStyle: "hyperlinkUnderline",
      },
      false: {
        layerStyle: "hyperlinkHoverUnderline",
      },
    },
  },
});

// AnotherComponent.tsx
<Link
  to="/reset-password"
  className={css({ layerStyle: "hyperlinkHoverDarken" })}
>
  Forgot password?
</Link>