@primer/brand-primitives 0.79.1-rc.ed00156c → 0.80.0-rc.4bfa3a79

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --base-color-scale-black-0: #000000;
   --base-color-scale-transparent: #ffffff00;
   --base-color-scale-white-0: #ffffff;
@@ -275,3 +276,141 @@
   --base-color-scale-indigo-8: #161962;
   --base-color-scale-indigo-9: #0d103f;
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --base-color-scale-black-0: #000000;
+    --base-color-scale-transparent: #00000000;
+    --base-color-scale-white-0: #ffffff;
+    --base-color-scale-gray-0: #d2d9d4;
+    --base-color-scale-gray-1: #c4ccc6;
+    --base-color-scale-gray-2: #a4aea6;
+    --base-color-scale-gray-3: #7c8980;
+    --base-color-scale-gray-4: #58635b;
+    --base-color-scale-gray-5: #353d37;
+    --base-color-scale-gray-6: #262c28;
+    --base-color-scale-gray-7: #191f1b;
+    --base-color-scale-gray-8: #0f1511;
+    --base-color-scale-gray-9: #060907;
+    --base-color-scale-blue-0: #c2edff;
+    --base-color-scale-blue-1: #a2daff;
+    --base-color-scale-blue-2: #78bafe;
+    --base-color-scale-blue-3: #3094ff;
+    --base-color-scale-blue-4: #0377ff;
+    --base-color-scale-blue-5: #0a50db;
+    --base-color-scale-blue-6: #1530b7;
+    --base-color-scale-blue-7: #082a8f;
+    --base-color-scale-blue-8: #052063;
+    --base-color-scale-blue-9: #000839;
+    --base-color-scale-green-0: #cdfcd9;
+    --base-color-scale-green-1: #8cf2a6;
+    --base-color-scale-green-2: #5fed83;
+    --base-color-scale-green-3: #23ea57;
+    --base-color-scale-green-4: #0fbf3e;
+    --base-color-scale-green-5: #08872b;
+    --base-color-scale-green-6: #0d6731;
+    --base-color-scale-green-7: #0e422c;
+    --base-color-scale-green-8: #0d3024;
+    --base-color-scale-green-9: #0a241b;
+    --base-color-scale-yellow-0: #f8e3a1;
+    --base-color-scale-yellow-1: #f7d162;
+    --base-color-scale-yellow-2: #fabf21;
+    --base-color-scale-yellow-3: #db9d00;
+    --base-color-scale-yellow-4: #be7d00;
+    --base-color-scale-yellow-5: #a06100;
+    --base-color-scale-yellow-6: #834800;
+    --base-color-scale-yellow-7: #653200;
+    --base-color-scale-yellow-8: #471f00;
+    --base-color-scale-yellow-9: #2a1000;
+    --base-color-scale-orange-0: #ffe2cc;
+    --base-color-scale-orange-1: #fab580;
+    --base-color-scale-orange-2: #f08a3a;
+    --base-color-scale-orange-3: #ea7110;
+    --base-color-scale-orange-4: #d56101;
+    --base-color-scale-orange-5: #b35101;
+    --base-color-scale-orange-6: #924100;
+    --base-color-scale-orange-7: #703100;
+    --base-color-scale-orange-8: #572400;
+    --base-color-scale-orange-9: #3d1800;
+    --base-color-scale-red-0: #ffd9d6;
+    --base-color-scale-red-1: #feb2ae;
+    --base-color-scale-red-2: #fd8986;
+    --base-color-scale-red-3: #fc5c5d;
+    --base-color-scale-red-4: #fa383d;
+    --base-color-scale-red-5: #d31231;
+    --base-color-scale-red-6: #ae0b29;
+    --base-color-scale-red-7: #860620;
+    --base-color-scale-red-8: #5e0217;
+    --base-color-scale-red-9: #33000d;
+    --base-color-scale-purple-0: #eadbff;
+    --base-color-scale-purple-1: #d3b3fe;
+    --base-color-scale-purple-2: #c08bfc;
+    --base-color-scale-purple-3: #a665f9;
+    --base-color-scale-purple-4: #8b40f5;
+    --base-color-scale-purple-5: #6619e1;
+    --base-color-scale-purple-6: #43179e;
+    --base-color-scale-purple-7: #26115f;
+    --base-color-scale-purple-8: #160048;
+    --base-color-scale-purple-9: #0e022c;
+    --base-color-scale-pink-0: #ffdbf7;
+    --base-color-scale-pink-1: #fcabe7;
+    --base-color-scale-pink-2: #f67ed2;
+    --base-color-scale-pink-3: #ed55ba;
+    --base-color-scale-pink-4: #e22d9f;
+    --base-color-scale-pink-5: #ca2186;
+    --base-color-scale-pink-6: #961c66;
+    --base-color-scale-pink-7: #741550;
+    --base-color-scale-pink-8: #520e39;
+    --base-color-scale-pink-9: #30081f;
+    --base-color-scale-coral-0: #ffd5c7;
+    --base-color-scale-coral-1: #fdb7a1;
+    --base-color-scale-coral-2: #fa9072;
+    --base-color-scale-coral-3: #f66945;
+    --base-color-scale-coral-4: #ef4319;
+    --base-color-scale-coral-5: #c53211;
+    --base-color-scale-coral-6: #a22710;
+    --base-color-scale-coral-7: #801e0f;
+    --base-color-scale-coral-8: #500a00;
+    --base-color-scale-coral-9: #3c0000;
+    --base-color-scale-lemon-0: #fcf2a5;
+    --base-color-scale-lemon-1: #f9e76a;
+    --base-color-scale-lemon-2: #f4da38;
+    --base-color-scale-lemon-3: #e4c411;
+    --base-color-scale-lemon-4: #c7a60b;
+    --base-color-scale-lemon-5: #a98906;
+    --base-color-scale-lemon-6: #876a04;
+    --base-color-scale-lemon-7: #654d02;
+    --base-color-scale-lemon-8: #423101;
+    --base-color-scale-lemon-9: #241900;
+    --base-color-scale-lime-0: #edffc9;
+    --base-color-scale-lime-1: #dcff96;
+    --base-color-scale-lime-2: #cdf041;
+    --base-color-scale-lime-3: #b1e119;
+    --base-color-scale-lime-4: #88b80f;
+    --base-color-scale-lime-5: #608a10;
+    --base-color-scale-lime-6: #3e5f0f;
+    --base-color-scale-lime-7: #22360b;
+    --base-color-scale-lime-8: #142a08;
+    --base-color-scale-lime-9: #091d05;
+    --base-color-scale-teal-0: #cff7f2;
+    --base-color-scale-teal-1: #99f1e8;
+    --base-color-scale-teal-2: #61eee3;
+    --base-color-scale-teal-3: #26ede2;
+    --base-color-scale-teal-4: #10dcd4;
+    --base-color-scale-teal-5: #0bbab6;
+    --base-color-scale-teal-6: #079695;
+    --base-color-scale-teal-7: #047172;
+    --base-color-scale-teal-8: #024b4d;
+    --base-color-scale-teal-9: #052d2e;
+    --base-color-scale-indigo-0: #dbe3ff;
+    --base-color-scale-indigo-1: #b3c1fd;
+    --base-color-scale-indigo-2: #8d9ff8;
+    --base-color-scale-indigo-3: #6a7df0;
+    --base-color-scale-indigo-4: #4a5ce5;
+    --base-color-scale-indigo-5: #2d3dd7;
+    --base-color-scale-indigo-6: #232fb3;
+    --base-color-scale-indigo-7: #212183;
+    --base-color-scale-indigo-8: #161962;
+    --base-color-scale-indigo-9: #0d103f;
+  }
+}

package/lib/design-tokens/css/tokens/base/colors/light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:48 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:03 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-color-success-fg: var(--base-color-scale-green-6);
   --brand-color-success-emphasis: var(--base-color-scale-green-5);
   --brand-color-success-muted: #8cf2a699;
@@ -83,3 +84,45 @@
   --brand-color-border-subtle: var(--base-color-scale-gray-6);
   --brand-color-focus: var(--base-color-scale-blue-3);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-color-success-fg: var(--base-color-scale-green-3);
+    --brand-color-success-emphasis: var(--base-color-scale-green-6);
+    --brand-color-success-muted: #0d302499;
+    --brand-color-success-subtle: #0e422cd9;
+    --brand-color-danger-fg: var(--base-color-scale-red-4);
+    --brand-color-danger-emphasis: var(--base-color-scale-red-5);
+    --brand-color-danger-muted: #5e021799;
+    --brand-color-danger-subtle: #fa383dd9;
+    --brand-color-error-fg: var(--brand-color-danger-fg);
+    --brand-color-error-emphasis: var(--brand-color-danger-emphasis);
+    --brand-color-error-muted: var(--brand-color-danger-muted);
+    --brand-color-error-subtle: var(--brand-color-danger-subtle);
+    --brand-color-accent-primary: var(--base-color-scale-green-2);
+    --brand-color-accent-secondary: var(--base-color-scale-yellow-3);
+    --brand-color-text-default: var(--base-color-scale-white-0);
+    --brand-color-text-muted: var(--base-color-scale-gray-2);
+    --brand-color-text-subtle: var(--brand-color-text-muted);
+    --brand-color-text-onEmphasis: var(--base-color-scale-black-0);
+    --brand-color-text-emphasized: var(--base-color-scale-green-3);
+    --brand-color-text-link-rest: var(--base-color-scale-blue-1);
+    --brand-color-text-link-pressed: var(--base-color-scale-blue-1);
+    --brand-color-text-danger: #ff8182;
+    --brand-color-text-error: var(--brand-color-text-danger);
+    --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-3);
+    --brand-color-neutral-emphasis: var(--base-color-scale-gray-3);
+    --brand-color-neutral-muted: #7c8980fe;
+    --brand-color-neutral-subtle: #7c8980ff;
+    --brand-color-canvas-default: var(--base-color-scale-black-0);
+    --brand-color-canvas-invert: var(--base-color-scale-white-0);
+    --brand-color-canvas-overlay: var(--base-color-scale-gray-6);
+    --brand-color-canvas-inset: var(--base-color-scale-black-0);
+    --brand-color-canvas-subtle: var(--base-color-scale-gray-8);
+    --brand-color-canvas-muted: #090d0a;
+    --brand-color-border-default: var(--base-color-scale-gray-5);
+    --brand-color-border-muted: var(--base-color-scale-gray-7);
+    --brand-color-border-subtle: var(--base-color-scale-gray-6);
+    --brand-color-focus: var(--base-color-scale-blue-3);
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:48 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:03 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-Accordion-toggle-color-start: var(--brand-color-accent-primary);
   --brand-Accordion-toggle-color-end: var(--brand-color-accent-primary);
   --brand-Accordion-toggle-color-default: var(--brand-color-text-default);
@@ -69,3 +70,38 @@
   --brand-Accordion-indicator-hover: var(--base-color-scale-gray-5);
   --brand-Accordion-indicator-active: var(--brand-color-accent-primary);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-Accordion-toggle-color-start: var(--brand-color-accent-primary);
+    --brand-Accordion-toggle-color-end: var(--brand-color-accent-primary);
+    --brand-Accordion-toggle-color-default: var(--brand-color-text-default);
+    --brand-Accordion-toggle-color-blue: var(--base-color-scale-blue-2);
+    --brand-Accordion-toggle-color-blue-purple-start: var(--base-color-scale-blue-2);
+    --brand-Accordion-toggle-color-blue-purple-end: var(--base-color-scale-purple-2);
+    --brand-Accordion-toggle-color-coral: var(--base-color-scale-coral-2);
+    --brand-Accordion-toggle-color-green: var(--base-color-scale-green-2);
+    --brand-Accordion-toggle-color-green-blue-start: var(--base-color-scale-green-2);
+    --brand-Accordion-toggle-color-green-blue-end: var(--base-color-scale-blue-2);
+    --brand-Accordion-toggle-color-gray: var(--base-color-scale-gray-2);
+    --brand-Accordion-toggle-color-indigo: var(--base-color-scale-indigo-2);
+    --brand-Accordion-toggle-color-lemon: var(--base-color-scale-lemon-2);
+    --brand-Accordion-toggle-color-lime: var(--base-color-scale-lime-2);
+    --brand-Accordion-toggle-color-orange: var(--base-color-scale-orange-2);
+    --brand-Accordion-toggle-color-pink: var(--base-color-scale-pink-2);
+    --brand-Accordion-toggle-color-pink-blue-start: var(--base-color-scale-pink-2);
+    --brand-Accordion-toggle-color-pink-blue-end: var(--base-color-scale-blue-2);
+    --brand-Accordion-toggle-color-purple: var(--base-color-scale-purple-2);
+    --brand-Accordion-toggle-color-purple-red-start: var(--base-color-scale-purple-2);
+    --brand-Accordion-toggle-color-purple-red-end: var(--base-color-scale-red-2);
+    --brand-Accordion-toggle-color-red: var(--base-color-scale-red-2);
+    --brand-Accordion-toggle-color-red-orange-start: var(--base-color-scale-red-2);
+    --brand-Accordion-toggle-color-red-orange-end: var(--base-color-scale-orange-2);
+    --brand-Accordion-toggle-color-teal: var(--base-color-scale-teal-2);
+    --brand-Accordion-toggle-color-yellow: var(--base-color-scale-yellow-2);
+    --brand-Accordion-border-color-default: var(--brand-color-border-muted);
+    --brand-Accordion-indicator-idle: var(--base-color-scale-gray-7);
+    --brand-Accordion-indicator-hover: var(--base-color-scale-gray-5);
+    --brand-Accordion-indicator-active: var(--brand-color-accent-primary);
+  }
+}

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-ActionMenu-color-splitButton-divider-default: var(--brand-color-border-muted);
   --brand-ActionMenu-color-splitButton-divider-primary: var(--base-color-scale-green-7);
   --brand-ActionMenu-color-item-hover: var(--base-color-scale-gray-1);
@@ -17,3 +18,12 @@
   --brand-ActionMenu-color-item-hover: var(--base-color-scale-gray-6);
   --brand-ActionMenu-color-scrollbar-thumb-bg: var(--base-color-scale-gray-3);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-ActionMenu-color-splitButton-divider-default: var(--brand-color-border-muted);
+    --brand-ActionMenu-color-splitButton-divider-primary: var(--brand-color-border-muted);
+    --brand-ActionMenu-color-item-hover: var(--base-color-scale-gray-6);
+    --brand-ActionMenu-color-scrollbar-thumb-bg: var(--base-color-scale-gray-3);
+  }
+}

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-AnchorNav-link-underline-default: var(--base-color-scale-gray-4);
   --brand-AnchorNav-link-underline-pressed: var(--base-color-scale-black-0);
 }
@@ -13,3 +14,10 @@
   --brand-AnchorNav-link-underline-default: var(--base-color-scale-gray-3);
   --brand-AnchorNav-link-underline-pressed: var(--base-color-scale-white-0);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-AnchorNav-link-underline-default: var(--base-color-scale-gray-3);
+    --brand-AnchorNav-link-underline-pressed: var(--base-color-scale-white-0);
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:48 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:03 GMT
  */
 
 :root {

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

@@ -1,13 +1,20 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-blinking-cursor-fgColor: var(--brand-color-accent-primary);
 }
 
 [data-color-mode="dark"] {
   --brand-blinking-cursor-fgColor: var(--base-color-scale-green-3);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-blinking-cursor-fgColor: var(--base-color-scale-green-3);
+  }
+}

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

@@ -1,13 +1,20 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-breadcrumbs-separator-borderColor: var(--base-color-scale-gray-6);
 }
 
 [data-color-mode="dark"] {
   --brand-breadcrumbs-separator-borderColor: var(--base-color-scale-gray-1);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-breadcrumbs-separator-borderColor: var(--base-color-scale-gray-1);
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:48 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:03 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-button-primary-bgColor-rest: var(--base-color-scale-green-6);
   --brand-button-primary-bgColor-hover: color-mix(in srgb, var(--base-color-scale-green-6), #000 16%);
   --brand-button-primary-bgColor-active: linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%), var(--base-color-scale-green-6);
@@ -63,3 +64,35 @@
   --brand-button-subtle-fgColor-rest: var(--brand-color-text-default);
   --brand-button-subtle-fgColor-disabled: var(--base-color-scale-gray-4);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-button-primary-bgColor-rest: var(--base-color-scale-green-5);
+    --brand-button-primary-bgColor-hover: color-mix(in srgb, var(--base-color-scale-green-5), #000 16%);
+    --brand-button-primary-bgColor-active: linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%), var(--base-color-scale-green-5);
+    --brand-button-primary-bgColor-disabled: var(--base-color-scale-gray-4);
+    --brand-button-primary-borderColor-rest: transparent;
+    --brand-button-primary-borderColor-hover: transparent;
+    --brand-button-primary-borderColor-active: var(--base-color-scale-green-6);
+    --brand-button-primary-borderColor-disabled: transparent;
+    --brand-button-primary-fgColor-rest: var(--base-color-scale-white-0);
+    --brand-button-primary-fgColor-disabled: var(--base-color-scale-gray-2);
+    --brand-button-primary-shadow-active: none;
+    --brand-button-secondary-bgColor-rest: rgba(255, 255, 255, 0.12);
+    --brand-button-secondary-bgColor-hover: rgba(255, 255, 255, 0.16);
+    --brand-button-secondary-bgColor-active: rgba(255, 255, 255, 0.26);
+    --brand-button-secondary-borderColor-rest: rgba(255, 255, 255, 0.06);
+    --brand-button-secondary-borderColor-hover: rgba(255, 255, 255, 0.12);
+    --brand-button-secondary-borderColor-active: rgba(255, 255, 255, 0.12);
+    --brand-button-secondary-fgColor-rest: var(--brand-color-text-default);
+    --brand-button-secondary-fgColor-disabled: var(--base-color-scale-gray-4);
+    --brand-button-subtle-bgColor-rest: rgba(0, 0, 0, 0.01);
+    --brand-button-subtle-bgColor-hover: rgba(255, 255, 255, 0.16);
+    --brand-button-subtle-bgColor-active: rgba(255, 255, 255, 0.24);
+    --brand-button-subtle-borderColor-rest: var(--base-color-scale-gray-6);
+    --brand-button-subtle-borderColor-hover: rgba(255, 255, 255, 0.12);
+    --brand-button-subtle-borderColor-active: rgba(255, 255, 255, 0.12);
+    --brand-button-subtle-fgColor-rest: var(--brand-color-text-default);
+    --brand-button-subtle-fgColor-disabled: var(--base-color-scale-gray-4);
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:48 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:03 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-Card-background-default: var(--brand-color-canvas-default);
   --brand-Card-background-overlay: rgba(242, 245, 243, 0.2);
 }
@@ -13,3 +14,10 @@
   --brand-Card-background-default: var(--brand-color-canvas-subtle);
   --brand-Card-background-overlay: rgba(242, 245, 243, 0.05);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-Card-background-default: var(--brand-color-canvas-subtle);
+    --brand-Card-background-overlay: rgba(242, 245, 243, 0.05);
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:48 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:03 GMT
  */
 
 :root {

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

@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-mode="auto"] {
   --brand-ComparisonTable-featured-color-start: var(--base-color-scale-pink-4);
   --brand-ComparisonTable-featured-color-end: var(--base-color-scale-indigo-5);
 }
@@ -13,3 +14,10 @@
   --brand-ComparisonTable-featured-color-start: var(--base-color-scale-pink-2);
   --brand-ComparisonTable-featured-color-end: var(--base-color-scale-indigo-3);
 }
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode="auto"] {
+    --brand-ComparisonTable-featured-color-start: var(--base-color-scale-pink-2);
+    --brand-ComparisonTable-featured-color-end: var(--base-color-scale-indigo-3);
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 GMT
  */
 
 :root {

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

@@ -1,16 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Oct 2026 14:25:49 GMT
+ * Generated on Tue, 20 Oct 2026 17:41:04 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);
   --brand-control-color-fg-default: var(--brand-color-text-default);
   --brand-control-color-fg-disabled: var(--base-color-scale-gray-4);
   --brand-control-color-focus: var(--base-color-scale-blue-6);
+  --brand-control-color-validation-error: var(--base-color-scale-red-6);
   --brand-control-checkbox-bg-default: var(--base-color-scale-white-0);
   --brand-control-checkbox-bg-hover: var(--brand-color-canvas-subtle);
   --brand-control-checkbox-bg-checked: var(--base-color-scale-green-6);
@@ -50,6 +52,7 @@
   --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);
@@ -81,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;
+  }
+}