@primer/react-brand 0.67.0-rc.4ac6bb58 → 0.67.0-rc.6189a70f

package/lib/Card/Card.d.ts

@@ -10,6 +10,7 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
 export declare const CardVariants: readonly ["default", "minimal"];
 export declare const CardCTAVariants: readonly ["text", "arrow", "none"];
+export declare const CardBackgroundColors: readonly ["default", "subtle", "none"];
 export declare const CardTokenPositions: readonly ["block-start", "block-end"];
 export declare const CardLabelVariants: readonly ["default", "muted", "accent"];
 export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
@@ -20,6 +21,7 @@ export type CardVariants = (typeof CardVariants)[number];
 export type CardCTAVariant = (typeof CardCTAVariants)[number];
 export type CardTokenPosition = (typeof CardTokenPositions)[number];
 export type CardLabelVariant = (typeof CardLabelVariants)[number];
+export type CardBackgroundColor = (typeof CardBackgroundColors)[number];
 type CardLeadingVisual = React.ReactElement | React.ComponentType<{
     className?: string;
 }>;
@@ -48,6 +50,10 @@ export type CardProps = {
      * Specifies the presentation of the call-to-action area
      */
     ctaVariant?: CardCTAVariant;
+    /**
+     * Optional, custom background color.
+     */
+    backgroundColor?: CardBackgroundColor;
     /**
      * A visual that appears before the heading, commonly used for a logo or brand mark
      */