@primer/react-brand 0.8.0 → 0.9.0-rc.540ca60

package/lib/AnchorNav/useExpandedMenu.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const useExpandedMenu: (open: boolean, containerRef: React.RefObject<HTMLElement>, anchorRef: React.RefObject<HTMLElement>) => void;
+export declare const useExpandedMenu: (open: boolean, containerRef: React.RefObject<HTMLElement>, anchorRef: React.RefObject<HTMLElement>, isNarrow: boolean) => void;

package/lib/css/main.css

@@ -89,7 +89,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
@@ -629,7 +629,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -654,7 +654,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -669,7 +669,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -848,7 +848,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -862,7 +862,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -880,7 +880,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
@@ -893,10 +893,8 @@ select {
   --brand-color-error-emphasis: var(--base-color-scale-red-5);
   --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
   --brand-color-error-subtle: var(--base-color-scale-red-0);
-  --brand-color-accent-fg: var(--base-color-scale-pink-5);
-  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
-  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
-  --brand-color-accent-subtle: var(--base-color-scale-pink-0);
+  --brand-color-accent-primary: var(--base-color-scale-pink-5);
+  --brand-color-accent-secondary: var(--base-color-scale-purple-5);
   --brand-color-text-default: var(--base-color-scale-gray-9);
   --brand-color-text-muted: var(--base-color-scale-gray-6);
   --brand-color-text-subtle: var(--base-color-scale-gray-5);
@@ -924,10 +922,8 @@ select {
   --brand-color-error-emphasis: var(--base-color-scale-red-5);
   --brand-color-error-muted: hsl(var(--base-color-scale-red-4-hsl) / 60%);
   --brand-color-error-subtle: hsl(var(--base-color-scale-red-4-hsl) / 85%);
-  --brand-color-accent-fg: var(--base-color-scale-pink-3);
-  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
-  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-4-hsl) / 60%);
-  --brand-color-accent-subtle: hsl(var(--base-color-scale-pink-4-hsl) / 85%);
+  --brand-color-accent-primary: var(--base-color-scale-pink-3);
+  --brand-color-accent-secondary: var(--base-color-scale-purple-3);
   --brand-color-text-default: var(--base-color-scale-white-0);
   --brand-color-text-muted: var(--base-color-scale-gray-3);
   --brand-color-text-subtle: var(--base-color-scale-gray-4);
@@ -1076,29 +1072,33 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
 [data-color-mode="light"] {
-  --brand-Button-background-base: var(--base-color-scale-black-0);
+  --brand-Button-background-base: var(--base-color-scale-gray-9);
   --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
   --brand-Button-background-disabled: var(--base-color-scale-gray-4);
   --brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
   --brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-3);
-  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-black-0);
-  --brand-Button-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-black-0);
+  --brand-Button-shadow-primary-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-secondary-default: inset 0 0 0 1px var(--brand-color-border-default);
+  --brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
   --brand-Button-shadow-focus: var(--brand-color-focus);
 }
 
 [data-color-mode="dark"] {
-  --brand-Button-background-base: var(--base-color-scale-white-0);
+  --brand-Button-background-base: var(--base-color-scale-gray-0);
   --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-white-0);
   --brand-Button-background-disabled: var(--base-color-scale-gray-4);
   --brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
   --brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-4);
-  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-white-0);
-  --brand-Button-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+  --brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-white-0);
+  --brand-Button-shadow-primary-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+  --brand-Button-shadow-secondary-default: inset 0 0 0 1px var(--brand-color-border-default);
+  --brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
   --brand-Button-shadow-focus: var(--brand-color-focus);
 }
 
@@ -1154,7 +1154,7 @@ select {
 }
 
 .Primer_Brand__Button-module__Button--primary___xIC7G:not(.Primer_Brand__Button-module__Button--disabled___Ba17E):hover {
-  box-shadow: var(--brand-Button-shadow-hover);
+  box-shadow: var(--brand-Button-shadow-primary-hover);
 }
 
 .Primer_Brand__Button-module__Button--primary___xIC7G.Primer_Brand__Button-module__Button--disabled___Ba17E {
@@ -1171,12 +1171,12 @@ select {
 
 .Primer_Brand__Button-module__Button--secondary___akMC2 {
   color: var(--brand-color-text-default);
-  box-shadow: inset 0 0 0 1px var(--brand-color-border-default);
+  box-shadow: var(--brand-Button-shadow-secondary-default);
   transition: box-shadow 200ms;
 }
 
 .Primer_Brand__Button-module__Button--secondary___akMC2:not(.Primer_Brand__Button-module__Button--disabled___Ba17E):hover {
-  box-shadow: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
+  box-shadow: var(--brand-Button-shadow-secondary-hover);
 }
 
 .Primer_Brand__Button-module__Button--label-secondary___DRJoJ.Primer_Brand__Button-module__Button-label--disabled___ZBpbj,
@@ -1194,13 +1194,23 @@ select {
 }
 
 .Primer_Brand__Button-module__Button--size-medium___EyCyw {
-  padding: var(--base-size-16) var(--base-size-24);
+  padding: calc(var(--base-size-16) - 2px) var(--base-size-24);
+}
+
+.Primer_Brand__Button-module__Button--size-medium___EyCyw .Primer_Brand__Button-module__Button--label___lUBc0 {
+  /* Brings overall default height down to 48px */
+  line-height: var(--brand-text-lineHeight-200);
 }
 
 .Primer_Brand__Button-module__Button--size-large___REN1l {
   padding: var(--base-size-16) var(--base-size-32);
 }
 
+.Primer_Brand__Button-module__Button--size-large___REN1l .Primer_Brand__Button-module__Button--label___lUBc0 {
+  /* Brings overall default height down to 56px */
+  line-height: var(--brand-text-lineHeight-300);
+}
+
 .Primer_Brand__Button-module__Button--disabled___Ba17E,
 .Primer_Brand__Button-module__Button--disabled___Ba17E:hover,
 .Primer_Brand__Button-module__Button--disabled___Ba17E:focus {
@@ -1266,7 +1276,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -1287,7 +1297,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -2073,7 +2083,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
@@ -2101,7 +2111,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
@@ -2206,18 +2216,18 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
 [data-color-mode="light"] {
-  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
-  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-primary);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-primary);
 }
 
 [data-color-mode="dark"] {
-  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
-  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-primary);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-primary);
 }
 
 .Primer_Brand__Accordion-module__Accordion___M_LPt {
@@ -2348,7 +2358,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -2358,7 +2368,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
@@ -2428,7 +2438,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -2447,7 +2457,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
@@ -3390,7 +3400,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -3707,7 +3717,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:30 GMT
  */
 
 :root,
@@ -3740,10 +3750,16 @@ Fixes safari bug where outline doesn't respect border-radius
  */
 
 .Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___rf35Q {
-  text-align: center;
+  text-align: left;
   margin: var(--base-size-24) 0;
 }
 
+@media screen and (min-width: 34rem) {
+  .Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___rf35Q {
+    text-align: center;
+  }
+}
+
 /*
 * Table
 */
@@ -4011,7 +4027,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:30 GMT
  */
 
 :root,
@@ -4051,6 +4067,11 @@ html {
   }
 }
 
+.AnchorNav--no-bg-scroll {
+  overflow: hidden;
+  height: 100vh;
+}
+
 /*
  * 2. AnchorNav root and inner bounding containers
  */
@@ -4070,6 +4091,7 @@ html {
 
 .Primer_Brand__AnchorNav-module__AnchorNav--stuck___AtvLO {
   box-shadow: 0 3px 6px rgba(140, 149, 159, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1); /* TODO: replace with a global token */
+  position: fixed;
 }
 
 .Primer_Brand__AnchorNav-module__AnchorNav--expanded___wVGbk {
@@ -4118,6 +4140,7 @@ html {
 @media screen and (min-width: 63.25rem) {
   .Primer_Brand__AnchorNav-module__AnchorNav___bwgAJ {
     padding: var(--base-size-12) var(--base-size-40);
+    height: 75px; /* same as subdomain nav bar */
   }
 
   .Primer_Brand__AnchorNav-module__AnchorNav--with-default-background-color___aFdXc {
@@ -4130,6 +4153,7 @@ html {
   .Primer_Brand__AnchorNav-module__AnchorNav-inner-container___lshlZ {
     margin: 0 auto;
     display: flex;
+    align-items: center;
   }
 }
 
@@ -4402,7 +4426,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:30 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 Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
@@ -13,10 +13,8 @@
   --brand-color-error-emphasis: var(--base-color-scale-red-5);
   --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
   --brand-color-error-subtle: var(--base-color-scale-red-0);
-  --brand-color-accent-fg: var(--base-color-scale-pink-5);
-  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
-  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
-  --brand-color-accent-subtle: var(--base-color-scale-pink-0);
+  --brand-color-accent-primary: var(--base-color-scale-pink-5);
+  --brand-color-accent-secondary: var(--base-color-scale-purple-5);
   --brand-color-text-default: var(--base-color-scale-gray-9);
   --brand-color-text-muted: var(--base-color-scale-gray-6);
   --brand-color-text-subtle: var(--base-color-scale-gray-5);
@@ -44,10 +42,8 @@
   --brand-color-error-emphasis: var(--base-color-scale-red-5);
   --brand-color-error-muted: hsl(var(--base-color-scale-red-4-hsl) / 60%);
   --brand-color-error-subtle: hsl(var(--base-color-scale-red-4-hsl) / 85%);
-  --brand-color-accent-fg: var(--base-color-scale-pink-3);
-  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
-  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-4-hsl) / 60%);
-  --brand-color-accent-subtle: hsl(var(--base-color-scale-pink-4-hsl) / 85%);
+  --brand-color-accent-primary: var(--base-color-scale-pink-3);
+  --brand-color-accent-secondary: var(--base-color-scale-purple-3);
   --brand-color-text-default: var(--base-color-scale-white-0);
   --brand-color-text-muted: var(--base-color-scale-gray-3);
   --brand-color-text-subtle: var(--base-color-scale-gray-4);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {
@@ -20,10 +20,8 @@
   --brand-color-text-subtle: var(--base-color-scale-gray-5);
   --brand-color-text-muted: var(--base-color-scale-gray-6);
   --brand-color-text-default: var(--base-color-scale-gray-9);
-  --brand-color-accent-subtle: var(--base-color-scale-pink-0);
-  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
-  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
-  --brand-color-accent-fg: var(--base-color-scale-pink-5);
+  --brand-color-accent-secondary: var(--base-color-scale-purple-5);
+  --brand-color-accent-primary: var(--base-color-scale-pink-5);
   --brand-color-error-subtle: var(--base-color-scale-red-0);
   --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
   --brand-color-error-emphasis: var(--base-color-scale-red-5);

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

@@ -1,15 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
 [data-color-mode="light"] {
-  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
-  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-primary);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-primary);
 }
 
 [data-color-mode="dark"] {
-  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
-  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-primary);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-primary);
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:30 GMT
  */
 
 :root,

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

@@ -1,27 +1,31 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,
 [data-color-mode="light"] {
-  --brand-Button-background-base: var(--base-color-scale-black-0);
+  --brand-Button-background-base: var(--base-color-scale-gray-9);
   --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
   --brand-Button-background-disabled: var(--base-color-scale-gray-4);
   --brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
   --brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-3);
-  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-black-0);
-  --brand-Button-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-black-0);
+  --brand-Button-shadow-primary-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-secondary-default: inset 0 0 0 1px var(--brand-color-border-default);
+  --brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
   --brand-Button-shadow-focus: var(--brand-color-focus);
 }
 
 [data-color-mode="dark"] {
-  --brand-Button-background-base: var(--base-color-scale-white-0);
+  --brand-Button-background-base: var(--base-color-scale-gray-0);
   --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-white-0);
   --brand-Button-background-disabled: var(--base-color-scale-gray-4);
   --brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
   --brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-4);
-  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-white-0);
-  --brand-Button-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+  --brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-white-0);
+  --brand-Button-shadow-primary-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+  --brand-Button-shadow-secondary-default: inset 0 0 0 1px var(--brand-color-border-default);
+  --brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
   --brand-Button-shadow-focus: var(--brand-color-focus);
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:30 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:30 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:19 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/size/border.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/size/breakpoints.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Dec 2022 11:07:18 GMT
+ * Generated on Thu, 15 Dec 2022 14:45:29 GMT
  */
 
 :root {