@primer/react-brand 0.17.0-rc.bd65dbc → 0.17.0-rc.e3d3fb9

package/lib/Card/Card.d.ts

@@ -7,11 +7,13 @@ import type { BaseProps } from '../component-helpers';
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
+export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
+export declare const defaultCardIconColor: "default";
 export declare type CardProps = {
     /**
      * Valid children include Card.Image, Card.Heading, and Card.Description
      */
-    children: React.ReactNode | React.ReactElement<CardLabelProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
+    children: React.ReactNode | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
     /**
      * The href of the link
      * */
@@ -21,6 +23,12 @@ export declare type CardProps = {
      * */
     ctaText?: string;
 } & BaseProps<HTMLAnchorElement> & React.ComponentPropsWithoutRef<'a'>;
+declare type CardIconProps = BaseProps<HTMLSpanElement> & {
+    icon: React.ReactNode;
+    color?: typeof CardIconColors[number];
+    hasBackground?: boolean;
+};
+declare function CardIcon({ icon: Icon, className, color, hasBackground, ...rest }: CardIconProps): JSX.Element;
 declare type CardLabelProps = BaseProps<HTMLSpanElement> & {
     children: React.ReactNode | React.ReactNode[];
     color?: typeof LabelColors[number];
@@ -38,6 +46,7 @@ declare type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
  */
 export declare const Card: React.ForwardRefExoticComponent<Pick<CardProps, "children" | "aria-labelledby" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "type" | "download" | "hrefLang" | "media" | "ping" | "rel" | "target" | "referrerPolicy" | "key" | "ctaText"> & React.RefAttributes<HTMLAnchorElement>> & {
     Label: React.ForwardRefExoticComponent<Pick<CardLabelProps, "children" | "className" | "id" | "color"> & React.RefAttributes<HTMLSpanElement>>;
+    Icon: typeof CardIcon;
     Heading: React.ForwardRefExoticComponent<Pick<CardHeadingProps, "children" | "className" | "id" | "as"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Pick<CardDescriptionProps, "children" | "className" | "id"> & React.RefAttributes<HTMLParagraphElement>>;
 };

package/lib/Label/Label.d.ts

@@ -4,7 +4,7 @@ import type { BaseProps } from '../component-helpers';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css';
-export declare const LabelColors: readonly ["default", "blue", "blue-purple", "coral", "green", "green-blue", "gray", "indigo", "lemon", "lime", "orange", "pink", "pink-blue", "purple", "purple-red", "red", "red-orange", "teal", "yellow"];
+export declare const LabelColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];
 export declare const LabelSizes: readonly ["small", "medium", "large"];
 export declare const defaultLabelColor: "default";
 export declare const defaultLabelSize: "medium";

package/lib/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const Colors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
+export declare const Gradients: readonly ["blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];

package/lib/css/main.css

@@ -89,7 +89,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,
@@ -629,7 +629,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -654,7 +654,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -669,7 +669,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -848,7 +848,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -862,7 +862,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -880,7 +880,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,
@@ -1182,7 +1182,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,
@@ -1632,7 +1632,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -1653,7 +1653,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -1900,6 +1900,11 @@ select {
   .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___iQd2r {
     display: none;
   }
+
+  .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--invisible___HnkQO {
+    display: none;
+  }
+
   .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--visible___ZeoFv {
     display: block;
     margin: 0;
@@ -2452,7 +2457,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,
@@ -2480,7 +2485,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,
@@ -2597,12 +2602,12 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,
 [data-color-mode="light"] {
-  --brand-Label-color-default: var(--base-color-scale-blue-5);
+  --brand-Label-color-default: var(--brand-color-text-default);
   --brand-Label-color-blue: var(--base-color-scale-blue-5);
   --brand-Label-color-blue-purple-start: var(--base-color-scale-blue-5);
   --brand-Label-color-blue-purple-end: var(--base-color-scale-purple-5);
@@ -2629,7 +2634,7 @@ select {
 }
 
 [data-color-mode="dark"] {
-  --brand-Label-color-default: var(--base-color-scale-blue-4);
+  --brand-Label-color-default: var(--brand-color-text-default);
   --brand-Label-color-blue: var(--base-color-scale-blue-0);
   --brand-Label-color-blue-purple-start: var(--base-color-scale-blue-2);
   --brand-Label-color-blue-purple-end: var(--base-color-scale-purple-3);
@@ -2711,7 +2716,7 @@ select {
 }
 
 .Primer_Brand__Label-module__Label--color-default___YCx2l {
-  --brand-Label-color: var(--brand-color-text-default);
+  --brand-Label-color: var(--brand-Label-color-default);
 }
 
 .Primer_Brand__Label-module__Label--color-blue___lZSxf {
@@ -2830,7 +2835,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,
@@ -2987,7 +2992,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -2997,7 +3002,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,
@@ -3067,7 +3072,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -3086,7 +3091,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,
@@ -4029,7 +4034,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -4583,7 +4588,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,
@@ -4893,7 +4898,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,
@@ -5292,7 +5297,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,
@@ -5473,7 +5478,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,
@@ -5593,7 +5598,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {
@@ -5605,22 +5610,76 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,
 [data-color-mode="light"] {
   --brand-Card-background-default: var(--brand-color-canvas-default);
+  --brand-Card-icon-background-default: var(--base-color-scale-gray-0);
+  --brand-Card-icon-background-blue: var(--base-color-scale-blue-0);
+  --brand-Card-icon-background-coral: var(--base-color-scale-coral-0);
+  --brand-Card-icon-background-green: var(--base-color-scale-green-0);
+  --brand-Card-icon-background-gray: var(--base-color-scale-gray-0);
+  --brand-Card-icon-background-indigo: var(--base-color-scale-indigo-0);
+  --brand-Card-icon-background-lemon: var(--base-color-scale-lemon-0);
+  --brand-Card-icon-background-lime: var(--base-color-scale-lime-0);
+  --brand-Card-icon-background-orange: var(--base-color-scale-orange-0);
+  --brand-Card-icon-background-pink: var(--base-color-scale-pink-0);
+  --brand-Card-icon-background-purple: var(--base-color-scale-purple-0);
+  --brand-Card-icon-background-red: var(--base-color-scale-red-0);
+  --brand-Card-icon-background-teal: var(--base-color-scale-teal-0);
+  --brand-Card-icon-background-yellow: var(--base-color-scale-yellow-0);
+  --brand-Card-icon-color-default: var(--brand-color-scale-gray-5);
+  --brand-Card-icon-color-blue: var(--base-color-scale-blue-5);
+  --brand-Card-icon-color-coral: var(--base-color-scale-coral-5);
+  --brand-Card-icon-color-green: var(--base-color-scale-green-5);
+  --brand-Card-icon-color-gray: var(--base-color-scale-gray-6);
+  --brand-Card-icon-color-indigo: var(--base-color-scale-indigo-5);
+  --brand-Card-icon-color-lemon: var(--base-color-scale-lemon-5);
+  --brand-Card-icon-color-lime: var(--base-color-scale-lime-5);
+  --brand-Card-icon-color-orange: var(--base-color-scale-orange-5);
+  --brand-Card-icon-color-pink: var(--base-color-scale-pink-5);
+  --brand-Card-icon-color-purple: var(--base-color-scale-purple-5);
+  --brand-Card-icon-color-red: var(--base-color-scale-red-5);
+  --brand-Card-icon-color-teal: var(--base-color-scale-teal-5);
+  --brand-Card-icon-color-yellow: var(--base-color-scale-yellow-5);
 }
 
 [data-color-mode="dark"] {
   --brand-Card-background-default: var(--brand-color-canvas-subtle);
+  --brand-Card-icon-background-default: var(--base-color-scale-gray-8);
+  --brand-Card-icon-background-blue: var(--base-color-scale-blue-8);
+  --brand-Card-icon-background-coral: var(--base-color-scale-coral-8);
+  --brand-Card-icon-background-green: var(--base-color-scale-green-8);
+  --brand-Card-icon-background-gray: var(--base-color-scale-gray-8);
+  --brand-Card-icon-background-indigo: var(--base-color-scale-indigo-8);
+  --brand-Card-icon-background-lemon: var(--base-color-scale-lemon-8);
+  --brand-Card-icon-background-lime: var(--base-color-scale-lime-8);
+  --brand-Card-icon-background-orange: var(--base-color-scale-orange-8);
+  --brand-Card-icon-background-pink: var(--base-color-scale-pink-8);
+  --brand-Card-icon-background-purple: var(--base-color-scale-purple-8);
+  --brand-Card-icon-background-red: var(--base-color-scale-red-8);
+  --brand-Card-icon-background-teal: var(--base-color-scale-teal-8);
+  --brand-Card-icon-background-yellow: var(--base-color-scale-yellow-8);
+  --brand-Card-icon-color-default: var(--brand-color-scale-gray-3);
+  --brand-Card-icon-color-blue: var(--base-color-scale-blue-3);
+  --brand-Card-icon-color-coral: var(--base-color-scale-coral-3);
+  --brand-Card-icon-color-green: var(--base-color-scale-green-3);
+  --brand-Card-icon-color-gray: var(--base-color-scale-gray-3);
+  --brand-Card-icon-color-indigo: var(--base-color-scale-indigo-3);
+  --brand-Card-icon-color-lemon: var(--base-color-scale-lemon-3);
+  --brand-Card-icon-color-lime: var(--base-color-scale-lime-3);
+  --brand-Card-icon-color-orange: var(--base-color-scale-orange-3);
+  --brand-Card-icon-color-pink: var(--base-color-scale-pink-3);
+  --brand-Card-icon-color-purple: var(--base-color-scale-purple-3);
+  --brand-Card-icon-color-red: var(--base-color-scale-red-3);
+  --brand-Card-icon-color-teal: var(--base-color-scale-teal-3);
+  --brand-Card-icon-color-yellow: var(--base-color-scale-yellow-3);
 }
 
 .Primer_Brand__Card-module__Card___ByGEk {
   max-width: var(--brand-Card-maxWidth);
-  display: flex;
-  flex-direction: column;
   text-decoration: none;
   color: var(--brand-color-text-default);
   background-color: var(--brand-Card-background-default);
@@ -5629,30 +5688,187 @@ html {
   border-radius: var(--brand-borderRadius-medium);
   padding: var(--base-size-32);
   transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    'icon icon'
+    'label label'
+    'heading heading'
+    'description description'
+    'action action';
+  flex: auto;
+  grid-template-rows: auto auto auto 1fr;
+}
+
+.Primer_Brand__Card-module__Card--has-icon___vBmET {
+  grid-template-areas:
+    'icon label'
+    'heading heading'
+    'description description'
+    'action action';
+}
+
+.Primer_Brand__Card-module__Card--has-icon___vBmET .Primer_Brand__Card-module__Card__label___EAot7 {
+  justify-self: flex-end;
+}
+
+.Primer_Brand__Card-module__Card--has-icon___vBmET .Primer_Brand__Card-module__Card__label___EAot7,
+.Primer_Brand__Card-module__Card--has-icon___vBmET .Primer_Brand__Card-module__Card__icon___H4tc9 {
+  align-self: center;
 }
 
 .Primer_Brand__Card-module__Card___ByGEk:hover {
   transform: scale3d(1.025, 1.025, 1);
 }
 
+.Primer_Brand__Card-module__Card__icon___H4tc9 {
+  margin-bottom: var(--base-size-16);
+  grid-area: icon;
+}
+
+.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  width: var(--base-size-44);
+  height: var(--base-size-44);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .Primer_Brand__Card-module__Card__label___EAot7 {
-  margin-bottom: var(--base-size-24);
+  margin-bottom: var(--base-size-16);
+  grid-area: label;
 }
 
 .Primer_Brand__Card-module__Card__heading___INFhp {
   margin-bottom: var(--base-size-20);
+  grid-area: heading;
 }
 
 .Primer_Brand__Card-module__Card__description___KN9CH {
   margin-bottom: var(--base-size-48);
+  grid-area: description;
 }
 
 .Primer_Brand__Card-module__Card__action___C6sRY {
+  grid-area: action;
   margin-top: auto;
   display: inline-flex;
   align-items: center;
 }
 
+.Primer_Brand__Card-module__Card__icon--color-default___Y2DUV {
+  color: var(--brand-Card-icon-color-default);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-default___Y2DUV.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-default);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-blue___NuYV8 {
+  color: var(--brand-Card-icon-color-blue);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-blue___NuYV8.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-blue);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-coral___rYl0b {
+  color: var(--brand-Card-icon-color-coral);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-coral___rYl0b.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-coral);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-green___xz7Vq {
+  color: var(--brand-Card-icon-color-green);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-green___xz7Vq.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-green);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-gray___gYwWP {
+  color: var(--brand-Card-icon-color-gray);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-gray___gYwWP.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-gray);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-indigo___xHafP {
+  color: var(--brand-Card-icon-color-indigo);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-indigo___xHafP.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-indigo);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-lemon___KT2Uh {
+  color: var(--brand-Card-icon-color-lemon);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-lemon___KT2Uh.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-lemon);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-lime___P9pP0 {
+  color: var(--brand-Label-color-lime);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-lime___P9pP0.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-lime);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-orange___s1gIr {
+  color: var(--brand-Card-icon-color-orange);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-orange___s1gIr.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-orange);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-pink___I7Qpw {
+  color: var(--brand-Card-icon-color-pink);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-pink___I7Qpw.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-pink);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-purple___G0J2O {
+  color: var(--brand-Card-icon-color-purple);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-purple___G0J2O.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-purple);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-red___lGSe1 {
+  color: var(--brand-Card-icon-color-red);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-red___lGSe1.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-red);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-teal___CsA4p {
+  color: var(--brand-Card-icon-color-teal);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-teal___CsA4p.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-teal);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-yellow___RP8rx {
+  color: var(--brand-Card-icon-color-yellow);
+}
+
+.Primer_Brand__Card-module__Card__icon--color-yellow___RP8rx.Primer_Brand__Card-module__Card__icon--badge___p6riH {
+  background-color: var(--brand-Card-icon-background-yellow);
+}
+
 .Primer_Brand__SectionIntro-module__SectionIntro___RduRB {
   display: flex;
   flex-direction: column;
@@ -5691,7 +5907,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/base/colors/color-scales.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/colors/global.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:08 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 25 Apr 2023 14:44:09 GMT
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
  */
 
 :root,