-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
Minor
-
Issue Summary
We have an issue reported where the forge macro button styling is not exported with the same styling and color.
Partner is using Custom UI kit for the macro but not any of the Atlaskit components
For styling, they are using Panda CSS.
function IconWithStatus({
Icon,
status,
color,
}: {
Icon: React.FC<React.SVGProps<SVGSVGElement>>;
status: string;
color: StateColor;
}) {
return (
<Box className={cx(colorRecipe({ color }), statusStyles)}>
<Icon
className={cx(
iconSm,
css({ display: "inline-block", marginRight: "sm", mt: "-3px" }),
)}
/>
<span>{status}</span>
</Box>
);
}const statusStyles = css({
display: "inline-block",
borderRadius: "sm",
px: "sm",
fontSize: "sm",
fontWeight: "medium",
color: "colorPalette.50",
_dark: {
color: "colorPalette.950/50",
},
bg: "colorPalette.500",
whiteSpace: "nowrap",
});const colorRecipe = cva({
base: {},
defaultVariants: {
color: "neutral",
},
variants: {
color: {
red: {
colorPalette: "red",
},
pink: {
colorPalette: "pink",
},
purple: {
colorPalette: "purple",
},
indigo: {
colorPalette: "indigo",
},
blue: {
colorPalette: "blue",
},
cyan: {
colorPalette: "cyan",
},
emerald: {
colorPalette: "emerald",
},
lime: {
colorPalette: "lime",
},
yellow: {
colorPalette: "yellow",
},
amber: {
colorPalette: "amber",
},
orange: {
colorPalette: "orange",
},
neutral: {
colorPalette: "neutral",
},
},
},
});
Steps to Reproduce
Export the content to pdf.
Expected Results
The same design and color to be exported.
Actual Results
The colors are removed.
Pics attached.
Workaround
No workaround.
