@primer/react-brand 0.80.0-rc.e1dc6447 → 0.80.0-rc.ff22e366

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-control-color-border-default: var(--base-color-scale-gray-4);
   --brand-control-color-border-disabled: var(--base-color-scale-gray-2);
   --brand-control-color-canvas-disabled: var(--base-color-scale-gray-1);
@@ -83,3 +84,45 @@
   --brand-control-radio-dot-checked: var(--base-color-scale-green-5);
   --brand-control-radio-dot-checked-hover: #309a4d;
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-control-color-border-default: var(--base-color-scale-gray-4);
+    --brand-control-color-border-disabled: var(--base-color-scale-gray-5);
+    --brand-control-color-canvas-disabled: var(--base-color-scale-gray-8);
+    --brand-control-color-fg-default: var(--brand-color-text-default);
+    --brand-control-color-fg-disabled: var(--base-color-scale-gray-5);
+    --brand-control-color-focus: var(--base-color-scale-blue-2);
+    --brand-control-color-validation-error: var(--base-color-scale-red-2);
+    --brand-control-checkbox-bg-default: var(--base-color-scale-gray-7);
+    --brand-control-checkbox-bg-hover: var(--brand-color-canvas-subtle);
+    --brand-control-checkbox-bg-checked: var(--base-color-scale-green-5);
+    --brand-control-checkbox-bg-checked-hover: #309a4d;
+    --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-green-5);
+    --brand-control-checkbox-bg-indeterminate-hover: #309a4d;
+    --brand-control-checkbox-bg-checked-disabled: color-mix(in srgb, var(--base-color-scale-green-6), #000 35%);
+    --brand-control-checkbox-fg-checked: var(--base-color-scale-white-0);
+    --brand-control-checkbox-fg-checked-disabled: color-mix(in srgb, var(--base-color-scale-green-5), #000 20%);
+    --brand-control-checkbox-border-default: var(--base-color-scale-gray-4);
+    --brand-control-checkbox-border-hover: var(--base-color-scale-gray-5);
+    --brand-control-checkbox-border-checked: #077726;
+    --brand-control-checkbox-border-checked-hover: rgba(0, 0, 0, 0.12);
+    --brand-control-checkbox-border-indeterminate: #077726;
+    --brand-control-checkbox-border-indeterminate-hover: rgba(0, 0, 0, 0.12);
+    --brand-control-checkbox-border-checked-disabled: color-mix(in srgb, var(--base-color-scale-green-6), #000 35%);
+    --brand-control-checkbox-border-unchecked-disabled: var(--base-color-scale-gray-5);
+    --brand-control-radio-bg-default: var(--base-color-scale-black-0);
+    --brand-control-radio-bg-hover: var(--brand-color-canvas-subtle);
+    --brand-control-radio-bg-checked: var(--base-color-scale-black-0);
+    --brand-control-radio-bg-checked-hover: var(--brand-color-canvas-subtle);
+    --brand-control-radio-bg-disabled: var(--brand-color-canvas-default);
+    --brand-control-radio-border-default: var(--base-color-scale-gray-4);
+    --brand-control-radio-border-hover: var(--base-color-scale-gray-5);
+    --brand-control-radio-border-checked: var(--base-color-scale-gray-4);
+    --brand-control-radio-border-checked-hover: var(--base-color-scale-gray-4);
+    --brand-control-radio-border-disabled: var(--base-color-scale-gray-5);
+    --brand-control-radio-dot-default: var(--base-color-scale-white-0);
+    --brand-control-radio-dot-checked: var(--base-color-scale-green-5);
+    --brand-control-radio-dot-checked-hover: #309a4d;
+  }
+}

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-CTABanner-shadow-color-start: var(--base-color-scale-green-6);
   --brand-CTABanner-shadow-color-end: var(--base-color-scale-blue-5);
   --brand-CTABanner-bgColor: var(--brand-color-canvas-subtle);
@@ -25,3 +26,16 @@
   --brand-CTABanner-color-logo-filter-muted: brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) contrast(92%);
   --brand-CTABanner-color-logo-filter-emphasis: brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107%) contrast(98%);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-CTABanner-shadow-color-start: var(--base-color-scale-green-2);
+    --brand-CTABanner-shadow-color-end: var(--base-color-scale-blue-3);
+    --brand-CTABanner-bgColor: var(--brand-color-canvas-subtle);
+    --brand-CTABanner-color-heading-emphasis: var(--brand-color-text-emphasized);
+    --brand-CTABanner-color-logo-muted: var(--brand-color-text-muted);
+    --brand-CTABanner-color-logo-emphasis: var(--brand-color-text-default);
+    --brand-CTABanner-color-logo-filter-muted: brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) contrast(92%);
+    --brand-CTABanner-color-logo-filter-emphasis: brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107%) contrast(98%);
+  }
+}

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-Eyebrowbanner-bgColor-rest: #ffffff99;
   --brand-Eyebrowbanner-borderColor-rest: var(--brand-color-border-default);
   --brand-Eyebrowbanner-heading-fgColor: var(--brand-color-text-default);
@@ -97,3 +98,52 @@
   --brand-Eyebrowbanner-fgColor-teal: var(--base-color-scale-teal-2);
   --brand-Eyebrowbanner-fgColor-yellow: var(--base-color-scale-yellow-2);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-Eyebrowbanner-bgColor-rest: #0d111799;
+    --brand-Eyebrowbanner-borderColor-rest: var(--base-color-scale-gray-5);
+    --brand-Eyebrowbanner-heading-fgColor: var(--brand-color-text-default);
+    --brand-Eyebrowbanner-subHeading-fgColor: var(--brand-color-text-muted);
+    --brand-Eyebrowbanner-icon-background-default: var(--base-color-scale-gray-6);
+    --brand-Eyebrowbanner-icon-background-blue: var(--base-color-scale-blue-8);
+    --brand-Eyebrowbanner-icon-background-coral: var(--base-color-scale-coral-8);
+    --brand-Eyebrowbanner-icon-background-green: var(--base-color-scale-green-8);
+    --brand-Eyebrowbanner-icon-background-gray: var(--base-color-scale-gray-6);
+    --brand-Eyebrowbanner-icon-background-indigo: var(--base-color-scale-indigo-8);
+    --brand-Eyebrowbanner-icon-background-lemon: var(--base-color-scale-lemon-8);
+    --brand-Eyebrowbanner-icon-background-lime: var(--base-color-scale-lime-8);
+    --brand-Eyebrowbanner-icon-background-orange: var(--base-color-scale-orange-8);
+    --brand-Eyebrowbanner-icon-background-pink: var(--base-color-scale-pink-8);
+    --brand-Eyebrowbanner-icon-background-purple: var(--base-color-scale-purple-8);
+    --brand-Eyebrowbanner-icon-background-red: var(--base-color-scale-red-8);
+    --brand-Eyebrowbanner-icon-background-teal: var(--base-color-scale-teal-8);
+    --brand-Eyebrowbanner-icon-background-yellow: var(--base-color-scale-yellow-8);
+    --brand-Eyebrowbanner-fgColor-default-start: var(--base-color-scale-purple-2);
+    --brand-Eyebrowbanner-fgColor-default-middle: var(--base-color-scale-pink-3);
+    --brand-Eyebrowbanner-fgColor-default-end: var(--base-color-scale-red-3);
+    --brand-Eyebrowbanner-fgColor-blue: var(--base-color-scale-blue-2);
+    --brand-Eyebrowbanner-fgColor-blue-purple-start: var(--base-color-scale-blue-2);
+    --brand-Eyebrowbanner-fgColor-blue-purple-end: var(--base-color-scale-purple-2);
+    --brand-Eyebrowbanner-fgColor-coral: var(--base-color-scale-coral-2);
+    --brand-Eyebrowbanner-fgColor-green: var(--base-color-scale-green-2);
+    --brand-Eyebrowbanner-fgColor-green-blue-start: var(--base-color-scale-green-2);
+    --brand-Eyebrowbanner-fgColor-green-blue-end: var(--base-color-scale-blue-2);
+    --brand-Eyebrowbanner-fgColor-gray: var(--base-color-scale-gray-2);
+    --brand-Eyebrowbanner-fgColor-indigo: var(--base-color-scale-indigo-2);
+    --brand-Eyebrowbanner-fgColor-lemon: var(--base-color-scale-lemon-2);
+    --brand-Eyebrowbanner-fgColor-lime: var(--base-color-scale-lime-2);
+    --brand-Eyebrowbanner-fgColor-orange: var(--base-color-scale-orange-2);
+    --brand-Eyebrowbanner-fgColor-pink: var(--base-color-scale-pink-2);
+    --brand-Eyebrowbanner-fgColor-pink-blue-start: var(--base-color-scale-pink-2);
+    --brand-Eyebrowbanner-fgColor-pink-blue-end: var(--base-color-scale-blue-2);
+    --brand-Eyebrowbanner-fgColor-purple: var(--base-color-scale-purple-2);
+    --brand-Eyebrowbanner-fgColor-purple-red-start: var(--base-color-scale-purple-2);
+    --brand-Eyebrowbanner-fgColor-purple-red-end: var(--base-color-scale-red-2);
+    --brand-Eyebrowbanner-fgColor-red: var(--base-color-scale-red-2);
+    --brand-Eyebrowbanner-fgColor-red-orange-start: var(--base-color-scale-red-2);
+    --brand-Eyebrowbanner-fgColor-red-orange-end: var(--base-color-scale-orange-2);
+    --brand-Eyebrowbanner-fgColor-teal: var(--base-color-scale-teal-2);
+    --brand-Eyebrowbanner-fgColor-yellow: var(--base-color-scale-yellow-2);
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:25 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/faq/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-FAQ-color-heading: var(--brand-color-text-default);
   --brand-FAQ-color-tabLabel-selected: var(--brand-color-text-default);
   --brand-FAQGroup-buttonIndicator-idle: var(--base-color-scale-gray-3);
@@ -19,3 +20,13 @@
   --brand-FAQGroup-buttonIndicator-hover: var(--base-color-scale-gray-5);
   --brand-FAQGroup-buttonIndicator-active: var(--brand-color-accent-primary);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-FAQ-color-heading: var(--brand-color-text-default);
+    --brand-FAQ-color-tabLabel-selected: var(--brand-color-text-default);
+    --brand-FAQGroup-buttonIndicator-idle: var(--base-color-scale-gray-7);
+    --brand-FAQGroup-buttonIndicator-hover: var(--base-color-scale-gray-5);
+    --brand-FAQGroup-buttonIndicator-active: var(--brand-color-accent-primary);
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/faq/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/faq/faq.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:25 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/colors-with-modes.css

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:07 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-FeatureComparisonTable-label-accentColor: var(--brand-color-text-emphasized);
   --brand-FeatureComparisonTable-highlightedColumn-bgColor: var(--brand-color-canvas-subtle);
   --brand-FeatureComparisonTable-includedIndicator-fgColor: var(--brand-color-text-emphasized);
@@ -27,3 +28,17 @@
   --brand-FeatureComparisonTable-refreshIndicator-bgColor: rgba(192, 139, 252, 0.2);
   --brand-FeatureComparisonTable-rowHighlight-bgColor: var(--brand-color-canvas-muted);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-FeatureComparisonTable-label-accentColor: var(--brand-color-accent-primary);
+    --brand-FeatureComparisonTable-highlightedColumn-bgColor: var(--brand-color-canvas-subtle);
+    --brand-FeatureComparisonTable-includedIndicator-fgColor: var(--brand-color-accent-primary);
+    --brand-FeatureComparisonTable-includedIndicator-bgColor: rgba(95, 237, 131, 0.2);
+    --brand-FeatureComparisonTable-unlimitedIndicator-fgColor: var(--base-color-scale-green-2);
+    --brand-FeatureComparisonTable-unlimitedIndicator-bgColor: rgba(95, 237, 131, 0.2);
+    --brand-FeatureComparisonTable-refreshIndicator-fgColor: var(--base-color-scale-purple-2);
+    --brand-FeatureComparisonTable-refreshIndicator-bgColor: rgba(192, 139, 252, 0.2);
+    --brand-FeatureComparisonTable-rowHighlight-bgColor: var(--brand-color-canvas-muted);
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/footer/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-footer-borderColor: var(--base-color-scale-green-6);
   --brand-footer-bg-color: var(--brand-color-canvas-subtle);
   --brand-footer-backToTop-borderColor-rest: var(--base-color-scale-gray-2);
@@ -29,3 +30,18 @@
   --brand-footer-socialIcon-restFilter: saturate(73%) hue-rotate(-89deg) brightness(110%);
   --brand-footer-socialIcon-hoverFilter: brightness(2);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-footer-borderColor: var(--base-color-scale-green-3);
+    --brand-footer-bg-color: var(--brand-color-canvas-subtle);
+    --brand-footer-backToTop-borderColor-rest: var(--base-color-scale-gray-6);
+    --brand-footer-backToTop-borderColor-hover: rgba(255, 255, 255, 0.12);
+    --brand-footer-backToTop-borderColor-active: rgba(255, 255, 255, 0.12);
+    --brand-footer-backToTop-bgColor-rest: rgba(0, 0, 0, 0.01);
+    --brand-footer-backToTop-bgColor-hover: rgba(255, 255, 255, 0.16);
+    --brand-footer-backToTop-bgColor-active: rgba(255, 255, 255, 0.24);
+    --brand-footer-socialIcon-restFilter: saturate(73%) hue-rotate(-89deg) brightness(110%);
+    --brand-footer-socialIcon-hoverFilter: brightness(2);
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/footer/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes.css

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:07 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-FrostedGlassVFX-bgColor: rgba(255, 255, 255, 0.7);
   --brand-FrostedGlassVFX-boxShadow: 0 4px 10px 0 rgba(0, 0, 0, 0.02);
   --brand-FrostedGlassVFX-borderMask: linear-gradient(to bottom, #d8dee480, #d8dee45e 100%);
@@ -15,3 +16,11 @@
   --brand-FrostedGlassVFX-boxShadow: 0 4px 10px 0 rgba(0, 0, 0, 0.02);
   --brand-FrostedGlassVFX-borderMask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) content-box;
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-FrostedGlassVFX-bgColor: rgba(156, 156, 156, 0.1);
+    --brand-FrostedGlassVFX-boxShadow: 0 4px 10px 0 rgba(0, 0, 0, 0.02);
+    --brand-FrostedGlassVFX-borderMask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) content-box;
+  }
+}

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

@@ -1,13 +1,20 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-Grid-column-bgColor-overlay: #fb51544d;
 }
 
 [data-color-mode="dark"] {
   --brand-Grid-column-bgColor-overlay: #fb51544d;
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-Grid-column-bgColor-overlay: #fb51544d;
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/grid/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/grid/grid.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:25 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/hero/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:07 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-Icon-background-default: var(--brand-Icon-background-green);
   --brand-Icon-background-blue: var(--base-color-scale-blue-0);
   --brand-Icon-background-coral: var(--base-color-scale-coral-0);
@@ -65,3 +66,36 @@
   --brand-Icon-color-teal: var(--base-color-scale-teal-2);
   --brand-Icon-color-yellow: var(--base-color-scale-yellow-2);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-Icon-background-default: var(--brand-Icon-background-green);
+    --brand-Icon-background-blue: var(--base-color-scale-blue-8);
+    --brand-Icon-background-coral: var(--base-color-scale-coral-8);
+    --brand-Icon-background-green: var(--base-color-scale-green-8);
+    --brand-Icon-background-gray: var(--base-color-scale-gray-6);
+    --brand-Icon-background-indigo: var(--base-color-scale-indigo-8);
+    --brand-Icon-background-lemon: var(--base-color-scale-lemon-8);
+    --brand-Icon-background-lime: var(--base-color-scale-lime-8);
+    --brand-Icon-background-orange: var(--base-color-scale-orange-8);
+    --brand-Icon-background-pink: var(--base-color-scale-pink-8);
+    --brand-Icon-background-purple: var(--base-color-scale-purple-8);
+    --brand-Icon-background-red: var(--base-color-scale-red-8);
+    --brand-Icon-background-teal: var(--base-color-scale-teal-8);
+    --brand-Icon-background-yellow: var(--base-color-scale-yellow-8);
+    --brand-Icon-color-default: var(--brand-Icon-color-green);
+    --brand-Icon-color-blue: var(--base-color-scale-blue-2);
+    --brand-Icon-color-coral: var(--base-color-scale-coral-2);
+    --brand-Icon-color-green: var(--base-color-scale-green-2);
+    --brand-Icon-color-gray: var(--base-color-scale-gray-2);
+    --brand-Icon-color-indigo: var(--base-color-scale-indigo-2);
+    --brand-Icon-color-lemon: var(--base-color-scale-lemon-2);
+    --brand-Icon-color-lime: var(--base-color-scale-lime-2);
+    --brand-Icon-color-orange: var(--base-color-scale-orange-2);
+    --brand-Icon-color-pink: var(--base-color-scale-pink-2);
+    --brand-Icon-color-purple: var(--base-color-scale-purple-2);
+    --brand-Icon-color-red: var(--base-color-scale-red-2);
+    --brand-Icon-color-teal: var(--base-color-scale-teal-2);
+    --brand-Icon-color-yellow: var(--base-color-scale-yellow-2);
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/icon/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/icon-button/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:25 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-IconButton-danger-fgColor-rest: var(--brand-color-danger-fg);
   --brand-IconButton-danger-fgColor-hover: var(--base-color-scale-white-0);
   --brand-IconButton-danger-fgColor-active: var(--base-color-scale-white-0);
@@ -37,3 +38,22 @@
   --brand-IconButton-invisible-bgColor-rest: transparent;
   --brand-IconButton-invisible-borderColor-rest: transparent;
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-IconButton-danger-fgColor-rest: var(--brand-color-danger-fg);
+    --brand-IconButton-danger-fgColor-hover: var(--base-color-scale-white-0);
+    --brand-IconButton-danger-fgColor-active: var(--base-color-scale-white-0);
+    --brand-IconButton-danger-bgColor-rest: var(--brand-button-secondary-bgColor-rest);
+    --brand-IconButton-danger-bgColor-hover: var(--brand-color-danger-emphasis);
+    --brand-IconButton-danger-bgColor-active: var(--brand-color-danger-emphasis);
+    --brand-IconButton-danger-borderColor-rest: var(--brand-button-secondary-borderColor-rest);
+    --brand-IconButton-danger-borderColor-hover: var(--brand-color-danger-emphasis);
+    --brand-IconButton-danger-borderColor-active: var(--brand-color-danger-emphasis);
+    --brand-IconButton-inactive-fgColor: var(--brand-color-text-muted);
+    --brand-IconButton-inactive-bgColor: var(--brand-color-canvas-subtle);
+    --brand-IconButton-inactive-borderColor: var(--brand-color-canvas-subtle);
+    --brand-IconButton-invisible-bgColor-rest: transparent;
+    --brand-IconButton-invisible-borderColor-rest: transparent;
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/ide/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:07 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-IDE-default-bgColor: var(--base-color-scale-gray-1);
   --brand-IDE-default-editor-bgColor: var(--base-color-scale-white-0);
   --brand-IDE-default-editor-tabs-bgColor: var(--base-color-scale-gray-0);
@@ -51,3 +52,29 @@
   --brand-IDE-playPauseControl-rest: #4d4e6a;
   --brand-IDE-playPauseControl-hover: #5a5b7c;
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-IDE-default-bgColor: #131337;
+    --brand-IDE-default-editor-bgColor: #242538;
+    --brand-IDE-default-editor-tabs-bgColor: linear-gradient(0deg, rgba(0, 56, 255, 0.02) 0%, rgba(0, 56, 255, 0.02) 100%), #17182c;
+    --brand-IDE-default-editor-tab-bgColor-rest: rgba(36, 37, 56, 0.5);
+    --brand-IDE-default-editor-tab-bgColor-active: #242538;
+    --brand-IDE-default-editor-tab-borderColor: var(--base-color-scale-blue-5);
+    --brand-IDE-glass-bgColor-rest: rgba(0, 0, 0, 0.7);
+    --brand-IDE-glass-chat-bgColor: rgba(0, 0, 0, 0.06);
+    --brand-IDE-glass-editor-bgColor: #242538c4;
+    --brand-IDE-glass-editor-tabs-bgColor: transparent;
+    --brand-IDE-glass-editor-tab-bgColor-rest: #24253880;
+    --brand-IDE-glass-editor-tab-bgColor-active: #242538c4;
+    --brand-IDE-borderColor: #171d22;
+    --brand-IDE-autoSuggest-bgColor: #0969da;
+    --brand-IDE-autoSuggest-fgColor: var(--base-color-scale-white-0);
+    --brand-IDE-autoSuggest-borderColor: var(--base-color-scale-blue-5);
+    --brand-IDE-autoSuggestLine-bgColor: var(--base-color-scale-blue-9);
+    --brand-IDE-scrollBar-bgColor: transparent;
+    --brand-IDE-scrollBar-fgColor: var(--base-color-scale-gray-5);
+    --brand-IDE-playPauseControl-rest: #4d4e6a;
+    --brand-IDE-playPauseControl-hover: #5a5b7c;
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/image/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:26 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-InlineCode-color-fg-default: var(--brand-color-text-muted);
   --brand-InlineCode-color-fg-heading: var(--brand-color-text-default);
   --brand-InlineCode-bgColor: var(--base-color-scale-gray-1);
@@ -15,3 +16,11 @@
   --brand-InlineCode-color-fg-heading: var(--brand-color-text-default);
   --brand-InlineCode-bgColor: var(--base-color-scale-gray-7);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-InlineCode-color-fg-default: var(--brand-color-text-muted);
+    --brand-InlineCode-color-fg-heading: var(--brand-color-text-default);
+    --brand-InlineCode-bgColor: var(--base-color-scale-gray-7);
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/inline-code/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/inline-link/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 16 Oct 2026 17:29:06 GMT
+ * Generated on Wed, 21 Oct 2026 10:39:24 GMT
  */
 
 :root {