@primer/react-brand 0.8.1-rc.301f39e → 0.9.0-rc.7b21a00

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/FAQ/FAQ.d.ts

@@ -1,14 +1,12 @@
-import React from 'react';
-import { AccordionContent, AccordionRootProps } from '..';
+import React, { PropsWithChildren } from 'react';
+import { AccordionContent } from '..';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
-declare type FAQRootProps = BaseProps<HTMLElement> & {
-    children: React.ReactElement<FAQHeadingProps | FAQSubheadingProps | AccordionRootProps>[];
-};
+declare type FAQRootProps = PropsWithChildren<BaseProps<HTMLElement>>;
 declare type FAQHeadingProps = BaseProps<HTMLHeadingElement> & {
     size?: 'medium' | 'large';
     align?: 'start' | 'center';
@@ -26,7 +24,7 @@ declare function FAQSubheading({ children, className, ...rest }: FAQSubheadingPr
 export declare const FAQ: React.ForwardRefExoticComponent<Pick<FAQRootProps, "children" | "className" | "id"> & React.RefAttributes<HTMLElement>> & {
     Subheading: typeof FAQSubheading;
     Heading: React.ForwardRefExoticComponent<Pick<FAQHeadingProps, "children" | "className" | "align" | "id" | "size"> & React.RefAttributes<HTMLHeadingElement>>;
-    Item: React.ForwardRefExoticComponent<Pick<AccordionRootProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open"> & React.RefAttributes<HTMLDetailsElement>>;
+    Item: React.ForwardRefExoticComponent<Pick<import("..").AccordionRootProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open"> & React.RefAttributes<HTMLDetailsElement>>;
     Question: React.ForwardRefExoticComponent<Pick<BaseProps<HTMLHeadingElement> & {
         className?: string | undefined;
         children: string;

package/lib/css/main.css

@@ -89,7 +89,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,
@@ -629,7 +629,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -654,7 +654,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -669,7 +669,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -848,7 +848,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -862,7 +862,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -880,7 +880,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -1287,7 +1297,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -2073,7 +2083,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,
@@ -2101,7 +2111,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,
@@ -2206,18 +2216,18 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 {
@@ -2318,6 +2328,15 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__summary___NUIYc::aft
   opacity: 0;
   transform: rotateZ(180deg);
 }
+
+.Primer_Brand__Accordion-module__Accordion__content___wMZGe {
+  color: var(--brand-color-text-muted);
+  font-family: var(--brand-fontStack-sansSerif);
+  font-weight: var(--brand-text-weight-300);
+  font-size: var(--brand-text-size-300);
+  line-height: var(--brand-text-lineHeight-300);
+}
+
 details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
   padding-left: var(--base-size-40);
   padding-bottom: var(--base-size-24);
@@ -2348,7 +2367,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -2358,7 +2377,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,
@@ -2428,7 +2447,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -2447,7 +2466,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,
@@ -3390,7 +3409,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {
@@ -3707,7 +3726,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,
@@ -4017,7 +4036,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,
@@ -4057,6 +4076,11 @@ html {
   }
 }
 
+.AnchorNav--no-bg-scroll {
+  overflow: hidden;
+  height: 100vh;
+}
+
 /*
  * 2. AnchorNav root and inner bounding containers
  */
@@ -4076,6 +4100,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 {
@@ -4124,6 +4149,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 {
@@ -4136,6 +4162,7 @@ html {
   .Primer_Brand__AnchorNav-module__AnchorNav-inner-container___lshlZ {
     margin: 0 auto;
     display: flex;
+    align-items: center;
   }
 }
 
@@ -4408,7 +4435,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 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 Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Dec 2022 11:10:40 GMT
+ * Generated on Thu, 15 Dec 2022 18:01:50 GMT
  */
 
 :root {