@primer/react-brand 0.27.2 → 0.27.3-rc.4db3a02

package/lib/Card/Card.d.ts

@@ -16,6 +16,10 @@ export type CardProps = {
      * Valid children include Card.Image, Card.Heading, and Card.Description
      */
     children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
+    /**
+     * Disable the default hover animation
+     */
+    disableAnimation?: boolean;
     /**
      * The href of the link
      * */

package/lib/Card/CardSkewEffect.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { BaseProps } from '../component-helpers';
+type CardSkewEffectProps = {
+    perspective?: number;
+    disableSkew?: boolean;
+} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
+export declare const CardSkewEffect: ({ color, children, perspective, disableSkew, ...rest }: PropsWithChildren<CardSkewEffectProps>) => JSX.Element;
+export {};

package/lib/css/main.css

@@ -94,7 +94,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root,
@@ -634,7 +634,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -659,7 +659,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -674,7 +674,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -801,7 +801,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -815,7 +815,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -834,7 +834,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -1187,7 +1187,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -1741,7 +1741,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -1968,7 +1968,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -2227,7 +2227,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -2253,7 +2253,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -3011,7 +3011,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -3847,7 +3847,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -3868,7 +3868,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -3878,7 +3878,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -4788,7 +4788,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -4816,7 +4816,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -4832,7 +4832,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -4954,7 +4954,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -4970,7 +4970,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -5216,7 +5216,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -5225,7 +5225,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -5243,7 +5243,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -5374,7 +5374,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -6475,7 +6475,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -6489,7 +6489,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -6699,7 +6699,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -6715,7 +6715,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -7033,7 +7033,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -7449,7 +7449,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -7627,7 +7627,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -7754,7 +7754,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -7882,93 +7882,10 @@ html {
   color: var(--brand-Pillar-icon-color-yellow);
 }
 
-/**
- * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
- */
-
-:root {
-  --brand-Card-animation-easing: var(--brand-animation-easing-default);
-  --brand-Card-animation-duration: 600ms;
-  --brand-Card-shadow: 0 3px 2px hsl(var(--base-color-scale-black-0-hsl) / 4%), 0 7px 5px hsl(var(--base-color-scale-black-0-hsl) / 2%), 0 13px 10px hsl(var(--base-color-scale-black-0-hsl) / 2%), 0 22px 17px hsl(var(--base-color-scale-black-0-hsl) / 2%);
-  --brand-Card-maxWidth: 26.25rem;
-}
-
-/**
- * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 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-6);
-  --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-6);
-  --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-2);
-  --brand-Card-icon-color-blue: var(--base-color-scale-blue-2);
-  --brand-Card-icon-color-coral: var(--base-color-scale-coral-2);
-  --brand-Card-icon-color-green: var(--base-color-scale-green-2);
-  --brand-Card-icon-color-gray: var(--base-color-scale-gray-2);
-  --brand-Card-icon-color-indigo: var(--base-color-scale-indigo-2);
-  --brand-Card-icon-color-lemon: var(--base-color-scale-lemon-2);
-  --brand-Card-icon-color-lime: var(--base-color-scale-lime-2);
-  --brand-Card-icon-color-orange: var(--base-color-scale-orange-2);
-  --brand-Card-icon-color-pink: var(--base-color-scale-pink-2);
-  --brand-Card-icon-color-purple: var(--base-color-scale-purple-2);
-  --brand-Card-icon-color-red: var(--base-color-scale-red-2);
-  --brand-Card-icon-color-teal: var(--base-color-scale-teal-2);
-  --brand-Card-icon-color-yellow: var(--base-color-scale-yellow-2);
-}
-
 .Primer_Brand__Card-module__Card___ByGEk {
   max-width: var(--brand-Card-maxWidth);
   text-decoration: none;
   color: var(--brand-color-text-default);
-  background-color: var(--brand-Card-background-default);
   border-radius: var(--brand-borderRadius-large);
   padding: var(--base-size-32);
   transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);
@@ -7987,6 +7904,10 @@ html {
   height: 100%;
 }
 
+.Primer_Brand__Card-module__Card--colorMode-light___LXDwj {
+  background-color: var(--brand-Card-background-default);
+}
+
 .Primer_Brand__Card-module__Card___ByGEk[focus-within] {
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
 }
@@ -7999,9 +7920,16 @@ html {
   text-decoration: none;
 }
 
+.Primer_Brand__Card-module__Card__link___Ye5mq {
+  text-decoration: none !important;
+}
+
 .Primer_Brand__Card-module__Card__link___Ye5mq {
   color: currentColor;
-  text-decoration: none;
+}
+
+.Primer_Brand__Card-module__Card--disableAnimation___Zv8eW:hover .Primer_Brand__Card-module__Card__link___Ye5mq {
+  text-decoration: underline !important;
 }
 
 /* The focus outline will appear around the entire card, not just the title */
@@ -8022,6 +7950,10 @@ html {
   border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
 }
 
+.Primer_Brand__Card-module__Card__outer___QBN0D {
+  height: 100%;
+}
+
 .Primer_Brand__Card-module__Card--icon___nVz0T {
   grid-template-areas:
     'image image'
@@ -8040,7 +7972,7 @@ html {
   align-self: center;
 }
 
-.Primer_Brand__Card-module__Card___ByGEk:hover {
+.Primer_Brand__Card-module__Card--colorMode-light___LXDwj:not(.Primer_Brand__Card-module__Card--disableAnimation___Zv8eW):hover {
   transform: scale3d(1.025, 1.025, 1);
 }
 
@@ -8214,6 +8146,125 @@ html {
   background-color: var(--brand-Card-icon-background-yellow);
 }
 
+.Primer_Brand__Card-module__Card--skew___pEeoW {
+  height: 100%;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.Primer_Brand__Card-module__Card--skew___pEeoW:hover .Primer_Brand__Card-module__Card__torch___KkYgP {
+  opacity: 0.85;
+}
+
+.Primer_Brand__Card-module__Card__skew-bounding___Fz3yy {
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-large);
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  background-color: var(--brand-Card-background-default);
+}
+
+.Primer_Brand__Card-module__Card__torch___KkYgP {
+  width: 650px;
+  height: 650px;
+  background-color: var(--brand-color-accent-primary);
+  filter: blur(180px);
+  border-radius: 300px;
+  opacity: 0;
+  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
+  mix-blend-mode: soft-light;
+  will-change: transform;
+  pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: -1;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
+ */
+
+:root {
+  --brand-Card-animation-easing: var(--brand-animation-easing-default);
+  --brand-Card-animation-duration: 600ms;
+  --brand-Card-shadow: 0 3px 2px hsl(var(--base-color-scale-black-0-hsl) / 4%), 0 7px 5px hsl(var(--base-color-scale-black-0-hsl) / 2%), 0 13px 10px hsl(var(--base-color-scale-black-0-hsl) / 2%), 0 22px 17px hsl(var(--base-color-scale-black-0-hsl) / 2%);
+  --brand-Card-maxWidth: 26.25rem;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Thu, 19 Oct 2023 13:34:38 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-6);
+  --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-6);
+  --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-2);
+  --brand-Card-icon-color-blue: var(--base-color-scale-blue-2);
+  --brand-Card-icon-color-coral: var(--base-color-scale-coral-2);
+  --brand-Card-icon-color-green: var(--base-color-scale-green-2);
+  --brand-Card-icon-color-gray: var(--base-color-scale-gray-2);
+  --brand-Card-icon-color-indigo: var(--base-color-scale-indigo-2);
+  --brand-Card-icon-color-lemon: var(--base-color-scale-lemon-2);
+  --brand-Card-icon-color-lime: var(--base-color-scale-lime-2);
+  --brand-Card-icon-color-orange: var(--base-color-scale-orange-2);
+  --brand-Card-icon-color-pink: var(--base-color-scale-pink-2);
+  --brand-Card-icon-color-purple: var(--base-color-scale-purple-2);
+  --brand-Card-icon-color-red: var(--base-color-scale-red-2);
+  --brand-Card-icon-color-teal: var(--base-color-scale-teal-2);
+  --brand-Card-icon-color-yellow: var(--base-color-scale-yellow-2);
+}
+
 .Primer_Brand__SectionIntro-module__SectionIntro___RduRB {
   display: flex;
   flex-direction: column;
@@ -8269,7 +8320,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -8713,7 +8764,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -12947,7 +12998,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -12965,7 +13016,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -12981,7 +13032,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -13206,7 +13257,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:38 GMT
  */
 
 :root,
@@ -13220,7 +13271,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {
@@ -13234,7 +13285,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 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, 17 Oct 2023 14:28:14 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/animation/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 14:28:13 GMT
+ * Generated on Thu, 19 Oct 2023 13:34:37 GMT
  */
 
 :root {