diff --git a/.changeset/seven-hornets-jam.md b/.changeset/seven-hornets-jam.md
new file mode 100644
index 00000000000..2699e13c8dd
--- /dev/null
+++ b/.changeset/seven-hornets-jam.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds button element selector to FilteredSearch button styles
diff --git a/.changeset/stupid-terms-hang.md b/.changeset/stupid-terms-hang.md
new file mode 100644
index 00000000000..bee78b92e04
--- /dev/null
+++ b/.changeset/stupid-terms-hang.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Bump primer/primitives to `7.5.1`
diff --git a/.changeset/yellow-planes-decide.md b/.changeset/yellow-planes-decide.md
new file mode 100644
index 00000000000..d0923ffb3ea
--- /dev/null
+++ b/.changeset/yellow-planes-decide.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add disabled color and backgroundColor to Button.Counter
diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx
index a0eb1fcee03..a18bb96daaf 100644
--- a/docs/content/CheckboxGroup.mdx
+++ b/docs/content/CheckboxGroup.mdx
@@ -1,5 +1,6 @@
 ---
 title: CheckboxGroup
+componentId: checkbox_group
 description: Renders a set of checkboxes to let users make one or more selections from a short list of options
 status: Alpha
 source: https://github.com/primer/react/blob/main/src/CheckboxGroup/CheckboxGroup.tsx
diff --git a/docs/content/Dialog2.mdx b/docs/content/Dialog.mdx
similarity index 99%
rename from docs/content/Dialog2.mdx
rename to docs/content/Dialog.mdx
index f10a2788dd3..3a6ad2eee77 100644
--- a/docs/content/Dialog2.mdx
+++ b/docs/content/Dialog.mdx
@@ -1,5 +1,6 @@
 ---
-title: Dialog v2
+title: Dialog
+componentId: dialog
 status: Alpha
 ---
 
@@ -53,7 +54,7 @@ By default, the Dialog component implements the design and interactions defined
       <>
         <Button onClick={openDialog}>Open</Button>
         {isOpen && (
-          <Dialog2
+          <Dialog
             title="Dialog example"
             subtitle={
               <>
@@ -64,7 +65,7 @@ By default, the Dialog component implements the design and interactions defined
             onClose={closeDialog}
           >
             <Text fontFamily="sans-serif">Some content</Text>
-          </Dialog2>
+          </Dialog>
         )}
       </>
     )
diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md
index 77ba62fcae7..d94eef2bd86 100644
--- a/docs/content/FilteredSearch.md
+++ b/docs/content/FilteredSearch.md
@@ -12,14 +12,16 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
 
 ```jsx live
 <FilteredSearch>
-  <Dropdown>
-    <Dropdown.Button>Filter</Dropdown.Button>
-    <Dropdown.Menu direction="sw">
-      <Dropdown.Item>Item 1</Dropdown.Item>
-      <Dropdown.Item>Item 2</Dropdown.Item>
-      <Dropdown.Item>Item 3</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
+  <ActionMenu>
+    <ActionMenu.Button as="summary">Filter</ActionMenu.Button>
+    <ActionMenu.Overlay>
+      <ActionList direction="sw">
+        <ActionList.Item>Item 1</ActionList.Item>
+        <ActionList.Item>Item 2</ActionList.Item>
+        <ActionList.Item>Item 3</ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
   <TextInput icon={SearchIcon} />
 </FilteredSearch>
 ```
diff --git a/docs/content/IconButton.mdx b/docs/content/IconButton.mdx
index 68409d6d40e..0edea279283 100644
--- a/docs/content/IconButton.mdx
+++ b/docs/content/IconButton.mdx
@@ -1,5 +1,6 @@
 ---
 title: IconButton
+componentId: icon_button
 status: Alpha
 source: https://github.com/primer/react/tree/main/src/Button2
 storybook: '/react/storybook?path=/story/composite-components-button2'
diff --git a/docs/content/LinkButton.mdx b/docs/content/LinkButton.mdx
deleted file mode 100644
index 4ba5ad8d208..00000000000
--- a/docs/content/LinkButton.mdx
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: LinkButton
-status: Alpha
-source: https://github.com/primer/react/tree/main/src/Button2
-storybook: '/react/storybook?path=/story/composite-components-button2'
-description: It is a combination of a button and link. Use this to make your link look like a button.
----
-
-## Usage
-
-### Installation
-
-```js
-import {LinkButton} from '@primer/react/drafts'
-```
-
-### Default
-
-The `LinkButton` can be considered an extension of `Button` component. It accepts all of the same props along with new link specific props like `to` and `href`.
-
-```jsx live drafts
-<LinkButton as="a" href="https://primer.style/">
-  Link to Primer
-</LinkButton>
-```
-
-### Other examples of using a LinkButton
-
-`LinkButton` also
-
-- supports the three different sizes. `small`, `medium`, `large`.
-- supports the different variants in [Button]('../Button2')
-- supports leadingIcon and trailingIcon
-
-```jsx live drafts
-<Box>
-  <LinkButton>Small link</LinkButton>
-  <LinkButton size="large" sx={{mt: 2}}>
-    Large link
-  </LinkButton>
-  <LinkButton variant="invisible" sx={{mt: 2}}>
-    Invisible link
-  </LinkButton>
-  <LinkButton variant="danger" sx={{mt: 2}}>
-    Danger link
-  </LinkButton>
-  <LinkButton trailingIcon={ArrowRightIcon} sx={{mt: 2}}>
-    Link with arrow
-  </LinkButton>
-</Box>
-```
-
-## API reference
-
-Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
-
-### Button
-
-<PropsTable>
-  <PropsTableRow name="children" required type="React.ReactNode" description="This will be the Button description." />
-  <PropsTableRow
-    name="variant"
-    type="'default' | 'primary' | 'danger' | 'outline' | 'invisible'"
-    description="Changes the look and feel of the button which is different for each variant"
-  />
-  <PropsTableRow
-    name="size"
-    type="'small' | 'medium' | 'large'"
-    description="Changes the size of the icon button component"
-  />
-  <PropsTableRow
-    name="leadingIcon"
-    type="Component"
-    description="provide an octicon. It will be placed before the text of the button"
-  />
-  <PropsTableRow
-    name="trailingIcon"
-    type="Component"
-    description="provide an octicon. It will be placed after the text of the button"
-  />
-  <PropsTableRow
-    name="as"
-    type="Component | 'string'"
-    description="This will use the tag provided in the `as` property. Simultaneously will accept all the new props associated with the new component.For eg- If your `as` value is `ReactRouterLink`, then the prop `to` will be supported in this component "
-  />
-  <PropsTableSxRow />
-</PropsTable>
-
-## Component status
-
-<ComponentChecklist
-  items={{
-    propsDocumented: true,
-    noUnnecessaryDeps: true,
-    adaptsToThemes: true,
-    adaptsToScreenSizes: true,
-    fullTestCoverage: true,
-    usedInProduction: false,
-    usageExamplesDocumented: true,
-    designReviewed: false,
-    a11yReviewed: false,
-    stableApi: false,
-    addressedApiFeedback: false,
-    hasDesignGuidelines: false,
-    hasFigmaComponent: false
-  }}
-/>
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index cc062402fa2..5396abdb8ef 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -1,5 +1,6 @@
 ---
 title: PageLayout
+componentId: page_layout
 status: Alpha
 # description: TODO
 source: https://github.com/primer/react/tree/main/src/PageLayout
diff --git a/docs/content/Popover.md b/docs/content/Popover.md
index 7ff6ce5e729..efc9bc3b1fd 100644
--- a/docs/content/Popover.md
+++ b/docs/content/Popover.md
@@ -14,9 +14,9 @@ import {Popover} from '@primer/react'
 
 ```jxs live
 <Box position="relative">
-  <Text textAlign="center" display="block">
-    <ButtonPrimary>Hello!</ButtonPrimary>
-  </Text>
+  <Box justifyContent="center" display="flex">
+    <Button variant="primary">Hello!</Button>
+  </Box>
 
   <Popover relative open={true} caret="top">
     <Popover.Content sx={{mt: 2}}>
diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx
index a5cbf373f20..99d2ae75b79 100644
--- a/docs/content/RadioGroup.mdx
+++ b/docs/content/RadioGroup.mdx
@@ -1,5 +1,6 @@
 ---
 title: RadioGroup
+componentId: radio_group
 description: Renders a set of radio inputs to let users make a single selection from a short list of options
 status: Alpha
 source: https://github.com/primer/react/blob/main/src/RadioGroup/RadioGroup.tsx
diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
index c6f77512445..a044fc2af21 100644
--- a/docs/content/SelectPanel.mdx
+++ b/docs/content/SelectPanel.mdx
@@ -45,9 +45,9 @@ function DemoComponent() {
   return (
     <SelectPanel
       renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-        <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+        <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
           {children || 'Select Labels'}
-        </DropdownButton>
+        </Button>
       )}
       placeholderText="Filter Labels"
       open={open}
diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md
index 7fecd4f8454..701dc47e262 100644
--- a/docs/content/SubNav.md
+++ b/docs/content/SubNav.md
@@ -48,20 +48,22 @@ This ensures that the NavLink gets `activeClassName='selected'`
 ```jsx live
 <SubNav aria-label="Main">
   <FilteredSearch>
-    <Dropdown>
-      <Dropdown.Button>Filter</Dropdown.Button>
-      <Dropdown.Menu direction="sw">
-        <Dropdown.Item>
-          <a href="#">Item 1</a>
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <a href="#">Item 2</a>
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <a href="#">Item 3</a>
-        </Dropdown.Item>
-      </Dropdown.Menu>
-    </Dropdown>
+    <ActionMenu>
+      <ActionMenu.Button>Filter</ActionMenu.Button>
+      <ActionMenu.Overlay>
+        <ActionList direction="sw">
+          <ActionList.Item>
+            <a href="#">Item 1</a>
+          </ActionList.Item>
+          <ActionList.Item>
+            <a href="#">Item 2</a>
+          </ActionList.Item>
+          <ActionList.Item>
+            <a href="#">Item 3</a>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
     <TextInput type="search" icon={SearchIcon} width={320} />
   </FilteredSearch>
   <SubNav.Links>
diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx
index 1bcf8880fc0..c25de07a382 100644
--- a/docs/content/deprecated/ActionList.mdx
+++ b/docs/content/deprecated/ActionList.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: action_list
-title: ActionList
+title: ActionList (legacy)
 status: Deprecated
 source: https://github.com/primer/react/tree/main/src/deprecated/ActionList
 ---
diff --git a/docs/content/deprecated/ActionMenu.mdx b/docs/content/deprecated/ActionMenu.mdx
index 0fa65bbc4b9..967d91761c6 100644
--- a/docs/content/deprecated/ActionMenu.mdx
+++ b/docs/content/deprecated/ActionMenu.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: action_menu
-title: ActionMenu
+title: ActionMenu (legacy)
 status: Deprecated
 source: https://github.com/primer/react/tree/main/src/deprecated/ActionMenu.tsx
 ---
diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md
index 2be97d6e22a..3a978b1c2e4 100644
--- a/docs/content/deprecated/BorderBox.md
+++ b/docs/content/deprecated/BorderBox.md
@@ -1,5 +1,4 @@
 ---
-componentId: border_box
 title: BorderBox
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Buttons.mdx b/docs/content/deprecated/Buttons.mdx
index c16aeb384b5..592d6cd58ed 100644
--- a/docs/content/deprecated/Buttons.mdx
+++ b/docs/content/deprecated/Buttons.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: button
-title: Button
+title: Button (legacy)
 status: deprecated
 source: https://github.com/primer/react/blob/main/src/Button
 storybook: '/react/storybook?path=/story/composite-components-button--default-button'
diff --git a/docs/content/deprecated/ChoiceInputField.mdx b/docs/content/deprecated/ChoiceInputField.mdx
index d4c9b640c31..7ad92201e56 100644
--- a/docs/content/deprecated/ChoiceInputField.mdx
+++ b/docs/content/deprecated/ChoiceInputField.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: choiceInputField
 title: ChoiceInputField
 status: Deprecated
 description: The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional  hint text.
diff --git a/docs/content/deprecated/Dialog.md b/docs/content/deprecated/Dialog.md
index dcd79b30623..feabc4ac1f9 100644
--- a/docs/content/deprecated/Dialog.md
+++ b/docs/content/deprecated/Dialog.md
@@ -1,11 +1,11 @@
 ---
-title: Dialog
+title: Dialog (legacy)
 status: Deprecated
 ---
 
 ## Deprecation
 
-Use [Dialog2](/Dialog2) instead.
+Use the [new version of Dialog](/Dialog) instead.
 
 **Before**
 
@@ -23,7 +23,7 @@ Use [Dialog2](/Dialog2) instead.
 ```jsx deprecated
 {
   open && (
-    <Dialog2
+    <Dialog
       title="Dialog example"
       subtitle={
         <>
@@ -34,13 +34,11 @@ Use [Dialog2](/Dialog2) instead.
       onClose={() => setOpen(false)}
     >
       <Text fontFamily="sans-serif">Some content</Text>
-    </Dialog2>
+    </Dialog>
   )
 }
 ```
 
-import State from '../../components/State'
-
 The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
 
 You'll need to manage the `isOpen` state in a wrapper component of your own and pass in a function to be used to close the Dialog. For documentation purposes only we've created a mock `State` to handle this, but you should handle the state in the component you consume `Dialog` in or in a wrapper component.
@@ -111,7 +109,7 @@ You can also pass any non-text content into the header:
             </Text>
             <Box display="flex" mt={3} justifyContent="flex-end">
               <Button sx={{mr: 1}}>Cancel</Button>
-              <ButtonDanger>Delete</ButtonDanger>
+              <Button variant="danger">Delete</Button>
             </Box>
           </Box>
         </Dialog>
diff --git a/docs/content/deprecated/DropdownMenu.mdx b/docs/content/deprecated/DropdownMenu.mdx
index df48fbc532c..7b03ceb72c5 100644
--- a/docs/content/deprecated/DropdownMenu.mdx
+++ b/docs/content/deprecated/DropdownMenu.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: dropdown_menu
 title: DropdownMenu
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md
index 5ad6838dfc8..631e973a3ef 100644
--- a/docs/content/deprecated/Flex.md
+++ b/docs/content/deprecated/Flex.md
@@ -1,5 +1,4 @@
 ---
-componentId: flex
 title: Flex
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/FormGroup.md b/docs/content/deprecated/FormGroup.md
index 143c750db0e..cb0a3143274 100644
--- a/docs/content/deprecated/FormGroup.md
+++ b/docs/content/deprecated/FormGroup.md
@@ -1,5 +1,4 @@
 ---
-componentId: form_group
 title: FormGroup
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md
index 905630fe9e7..7f1d6810a3e 100644
--- a/docs/content/deprecated/Grid.md
+++ b/docs/content/deprecated/Grid.md
@@ -1,5 +1,4 @@
 ---
-componentId: grid
 title: Grid
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/InputField.mdx b/docs/content/deprecated/InputField.mdx
index 6da7689f800..5a613bfa5bc 100644
--- a/docs/content/deprecated/InputField.mdx
+++ b/docs/content/deprecated/InputField.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: inputField
 title: InputField
 status: Deprecated
 description: The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text.
diff --git a/docs/content/deprecated/Label.mdx b/docs/content/deprecated/Label.mdx
index 6546cc905ec..e8ce7b7dbef 100644
--- a/docs/content/deprecated/Label.mdx
+++ b/docs/content/deprecated/Label.mdx
@@ -1,5 +1,5 @@
 ---
-title: Label
+title: Label (legacy)
 description: Use Label components to add contextual metadata to a design.
 status: Deprecated
 source: https://github.com/primer/react/blob/main/src/Label.tsx
diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md
index fb2006117ca..8faae3c9475 100644
--- a/docs/content/deprecated/Position.md
+++ b/docs/content/deprecated/Position.md
@@ -1,5 +1,4 @@
 ---
-componentId: position
 title: Position
 status: Deprecated
 ---
diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
index 6532f85324d..f89af5a7a60 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
@@ -1,46 +1,10 @@
 import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
-import {
-  AlertIcon,
-  ArchiveIcon,
-  ArrowRightIcon,
-  CalendarIcon,
-  CheckIcon,
-  DotIcon,
-  FilterIcon,
-  FlameIcon,
-  GearIcon,
-  GitCommitIcon,
-  IterationsIcon,
-  KebabHorizontalIcon,
-  LawIcon,
-  LinkIcon,
-  MailIcon,
-  MarkGithubIcon,
-  NoteIcon,
-  NumberIcon,
-  SmileyIcon,
-  PencilIcon,
-  PersonIcon,
-  ProjectIcon,
-  SearchIcon,
-  SingleSelectIcon,
-  StarIcon,
-  TrashIcon,
-  TypographyIcon,
-  VersionsIcon,
-  XIcon,
-  ZapIcon,
-  TriangleDownIcon
-} from '@primer/octicons-react'
+import * as octicons from '@primer/octicons-react'
 import * as primerComponents from '@primer/react'
 import * as drafts from '@primer/react/drafts'
 import * as deprecated from '@primer/react/deprecated'
 import {Placeholder} from '@primer/react/Placeholder'
 import React from 'react'
-import {AnchoredOverlay} from '../../../../src/AnchoredOverlay'
-import {ConfirmationDialog, useConfirm} from '../../../../src/Dialog/ConfirmationDialog'
-import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
-import {SelectPanel} from '../../../../src/SelectPanel/SelectPanel'
 import State from '../../../components/State'
 
 const ReactRouterLink = ({to, ...props}) => {
@@ -52,46 +16,11 @@ export default function resolveScope(metastring) {
   return {
     ...doctocatComponents,
     ...primerComponents,
+    ...octicons,
     ...(metastring.includes('drafts') ? drafts : {}),
     ...(metastring.includes('deprecated') ? deprecated : {}),
     ReactRouterLink,
     State,
-    CheckIcon,
-    SearchIcon,
-    ZapIcon,
-    XIcon,
-    DotIcon,
-    SmileyIcon,
-    PersonIcon,
-    MailIcon,
-    GitCommitIcon,
-    FlameIcon,
-    MarkGithubIcon,
-    NoteIcon,
-    ProjectIcon,
-    FilterIcon,
-    GearIcon,
-    TypographyIcon,
-    VersionsIcon,
-    LinkIcon,
-    LawIcon,
-    StarIcon,
-    AlertIcon,
-    ArrowRightIcon,
-    KebabHorizontalIcon,
-    PencilIcon,
-    ArchiveIcon,
-    TrashIcon,
-    CalendarIcon,
-    IterationsIcon,
-    NumberIcon,
-    SingleSelectIcon,
-    TriangleDownIcon,
-    Dialog2,
-    ConfirmationDialog,
-    useConfirm,
-    AnchoredOverlay,
-    SelectPanel,
     Placeholder
   }
 }
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 30143970b9c..59369018686 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -65,8 +65,10 @@
       url: /CircleOcticon
     - title: CounterLabel
       url: /CounterLabel
-    - title: Details & useDetails
+    - title: Details
       url: /Details
+    - title: Dialog
+      url: /Dialog
     - title: FilteredSearch
       url: /FilteredSearch
     - title: FilterList
@@ -143,23 +145,23 @@
       url: /Truncate
     - title: UnderlineNav
       url: /UnderlineNav
-- title: Drafts
-  children:
+# - title: Drafts
+#   children:
 - title: Deprecated
   children:
-    - title: ActionList
+    - title: ActionList (legacy)
       url: /deprecated/ActionList
-    - title: ActionMenu
+    - title: ActionMenu (legacy)
       url: /deprecated/ActionMenu
     - title: BorderBox
       url: /deprecated/BorderBox
-    - title: Buttons
+    - title: Buttons (legacy)
       url: /deprecated/Buttons
     - title: ChoiceFieldset
       url: /deprecated/ChoiceFieldset
     - title: ChoiceInputField
       url: /deprecated/ChoiceInputField
-    - title: Dialog
+    - title: Dialog (legacy)
       url: /deprecated/Dialog
     - title: Dropdown
       url: /deprecated/Dropdown
diff --git a/package-lock.json b/package-lock.json
index 12b349e2644..516123d6476 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@primer/behaviors": "1.1.0",
         "@primer/octicons-react": "16.1.1",
-        "@primer/primitives": "7.1.1",
+        "@primer/primitives": "7.5.1",
         "@radix-ui/react-polymorphic": "0.0.14",
         "@react-aria/ssr": "3.1.0",
         "@styled-system/css": "5.1.5",
@@ -5659,9 +5659,9 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz",
-      "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw=="
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.5.1.tgz",
+      "integrity": "sha512-1pFKR+FcYRPXJ+zK/qtidrCJB7WmTaAX4sG7zE5LvGWjS5latue4pzZrK0FxxGGBdAU3HpoabANsGjv7T7sRRg=="
     },
     "node_modules/@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -39292,9 +39292,9 @@
       "requires": {}
     },
     "@primer/primitives": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz",
-      "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw=="
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.5.1.tgz",
+      "integrity": "sha512-1pFKR+FcYRPXJ+zK/qtidrCJB7WmTaAX4sG7zE5LvGWjS5latue4pzZrK0FxxGGBdAU3HpoabANsGjv7T7sRRg=="
     },
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",
diff --git a/package.json b/package.json
index 75e425e68aa..1570c01b181 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
   "dependencies": {
     "@primer/behaviors": "1.1.0",
     "@primer/octicons-react": "16.1.1",
-    "@primer/primitives": "7.1.1",
+    "@primer/primitives": "7.5.1",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
diff --git a/src/Button/Button2.stories.tsx b/src/Button/Button2.stories.tsx
index 2df7749e413..a4ae611a3ba 100644
--- a/src/Button/Button2.stories.tsx
+++ b/src/Button/Button2.stories.tsx
@@ -25,6 +25,12 @@ export default {
         type: 'radio',
         options: ['small', 'medium', 'large']
       }
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+        default: false
+      }
     }
   }
 } as Meta
@@ -151,9 +157,16 @@ export const blockButton = ({...args}: ButtonProps) => {
   )
 }
 
-export const disabledButton = ({...args}: ButtonProps) => {
+export const DisabledButton = ({...args}: ButtonProps) => {
+  const [count, setCount] = useState(0)
   return (
     <>
+      <Box mb={2}>
+        <Button disabled onClick={() => setCount(count + 1)} {...args}>
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
       <Box mb={2}>
         <Button disabled {...args}>
           Disabled
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index e4f5eea4597..a17f6910347 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -22,7 +22,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
-        backgroundColor: 'btn.disabledBg'
+        '[data-component=ButtonCounter]': {
+          color: 'inherit'
+        }
       },
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.activeBg',
@@ -48,9 +50,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'btn.primary.disabledText',
-        backgroundColor: 'btn.primary.disabledBg'
+        backgroundColor: 'btn.primary.disabledBg',
+        '[data-component=ButtonCounter]': {
+          color: 'inherit'
+        }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.primary.counterBg',
         color: 'btn.primary.text'
       },
@@ -68,7 +73,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.danger.hoverBg',
         borderColor: 'btn.danger.hoverBorder',
         boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
-        '[data-component="ButtonCounter"]': {
+        '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.danger.hoverCounterBg',
           color: 'btn.danger.hoverText'
         }
@@ -88,11 +93,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.danger.disabledText',
         backgroundColor: 'btn.danger.disabledBg',
         borderColor: 'btn.danger.disabledBorder',
-        '[data-component="ButtonCounter"]': {
+        '[data-component=ButtonCounter]': {
+          color: 'inherit',
           backgroundColor: 'btn.danger.disabledCounterBg'
         }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         color: 'btn.danger.text',
         backgroundColor: 'btn.danger.counterBg'
       },
@@ -119,7 +125,10 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.selectedBg'
       },
       '&:disabled': {
-        color: 'primer.fg.disabled'
+        color: 'primer.fg.disabled',
+        '[data-component=ButtonCounter]': {
+          color: 'inherit'
+        }
       },
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.selectedBg'
@@ -136,9 +145,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.outline.hoverBg',
         borderColor: 'outline.hoverBorder',
         boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
-        '[data-component="ButtonCounter"]': {
+        '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.hoverCounterBg',
-          color: 'btn.outline.hoverText'
+          color: 'inherit'
         }
       },
       // focus must come before :active so that the active box shadow overrides
@@ -158,11 +167,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.outline.disabledText',
         backgroundColor: 'btn.outline.disabledBg',
         borderColor: 'btn.border',
-        '[data-component="ButtonCounter"]': {
-          backgroundColor: 'btn.outline.disabledCounterBg'
+        '[data-component=ButtonCounter]': {
+          backgroundColor: 'btn.outline.disabledCounterBg',
+          color: 'inherit'
         }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.outline.counterBg',
         color: 'btn.outline.text'
       },
@@ -212,7 +222,7 @@ export const getSizeStyles = (size = 'medium', variant: VariantType = 'default',
     paddingY: `${paddingY}px`,
     paddingX: `${paddingX}px`,
     fontSize,
-    '[data-component="ButtonCounter"]': {
+    '[data-component=ButtonCounter]': {
       fontSize
     }
   }
diff --git a/src/FilteredSearch.tsx b/src/FilteredSearch.tsx
index 2e7bf8de368..888a9cc7ade 100644
--- a/src/FilteredSearch.tsx
+++ b/src/FilteredSearch.tsx
@@ -7,7 +7,8 @@ const FilteredSearch = styled.div<SxProp>`
   display: flex;
   align-items: stretch;
 
-  summary {
+  summary,
+  > button {
     border-radius: 0;
     border-top-left-radius: ${get('radii.2')};
     border-bottom-left-radius: ${get('radii.2')};
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index 0e44dd1890b..b7e6b825d1c 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -51,7 +51,10 @@ exports[`ActionMenu renders consistently 1`] = `
 .c1:disabled {
   cursor: default;
   color: #8c959f;
-  background-color: btn.disabledBg;
+}
+
+.c1:disabled [data-component=ButtonCounter] {
+  color: inherit;
 }
 
 .c1:disabled svg {
@@ -74,7 +77,7 @@ exports[`ActionMenu renders consistently 1`] = `
   grid-area: trailingIcon;
 }
 
-.c1 [data-component="ButtonCounter"] {
+.c1 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 1546846cb53..f2e1657f35f 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -40,7 +40,10 @@ exports[`Button renders consistently 1`] = `
 .c0:disabled {
   cursor: default;
   color: #8c959f;
-  background-color: btn.disabledBg;
+}
+
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
 }
 
 .c0:disabled svg {
@@ -63,7 +66,7 @@ exports[`Button renders consistently 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
@@ -133,7 +136,8 @@ exports[`Button styles danger button appropriately 1`] = `
   border-color: btn.danger.disabledBorder;
 }
 
-.c0:disabled [data-component="ButtonCounter"] {
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
   background-color: btn.danger.disabledCounterBg;
 }
 
@@ -157,7 +161,7 @@ exports[`Button styles danger button appropriately 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
   color: btn.danger.text;
   background-color: btn.danger.counterBg;
@@ -170,7 +174,7 @@ exports[`Button styles danger button appropriately 1`] = `
   box-shadow: undefined;
 }
 
-.c0:hover:not([disabled]) [data-component="ButtonCounter"] {
+.c0:hover:not([disabled]) [data-component=ButtonCounter] {
   background-color: btn.danger.hoverCounterBg;
   color: btn.danger.hoverText;
 }
@@ -246,6 +250,10 @@ exports[`Button styles invisible button appropriately 1`] = `
   color: primer.fg.disabled;
 }
 
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
+}
+
 .c0:disabled svg {
   opacity: 0.6;
 }
@@ -266,7 +274,7 @@ exports[`Button styles invisible button appropriately 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
@@ -341,8 +349,9 @@ exports[`Button styles outline button appropriately 1`] = `
   border-color: btn.border;
 }
 
-.c0:disabled [data-component="ButtonCounter"] {
+.c0:disabled [data-component=ButtonCounter] {
   background-color: btn.outline.disabledCounterBg;
+  color: inherit;
 }
 
 .c0:disabled svg {
@@ -365,7 +374,7 @@ exports[`Button styles outline button appropriately 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
   background-color: btn.outline.counterBg;
   color: btn.outline.text;
@@ -378,9 +387,9 @@ exports[`Button styles outline button appropriately 1`] = `
   box-shadow: undefined;
 }
 
-.c0:hover:not([disabled]) [data-component="ButtonCounter"] {
+.c0:hover:not([disabled]) [data-component=ButtonCounter] {
   background-color: btn.outline.hoverCounterBg;
-  color: btn.outline.hoverText;
+  color: inherit;
 }
 
 .c0:focus:not([disabled]) {
@@ -456,6 +465,10 @@ exports[`Button styles primary button appropriately 1`] = `
   background-color: btn.primary.disabledBg;
 }
 
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
+}
+
 .c0:disabled svg {
   opacity: 0.6;
 }
@@ -476,7 +489,7 @@ exports[`Button styles primary button appropriately 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
   background-color: btn.primary.counterBg;
   color: btn.primary.text;
diff --git a/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap b/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap
index c1e3a865678..b093bbf8a7f 100644
--- a/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap
+++ b/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap
@@ -12,7 +12,8 @@ exports[`FilteredSearch renders consistently 1`] = `
   align-items: stretch;
 }
 
-.c0 summary {
+.c0 summary,
+.c0 > button {
   border-radius: 0;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
index a864464835e..fb64ee82db7 100644
--- a/src/__tests__/__snapshots__/themePreval.test.ts.snap
+++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`snapshot theme-preval.js 1`] = `
 "// this file was prevaled
 // This file needs to be a JavaScript file using CommonJS to be compatible with preval
-// Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
+// Cache bust: 2022-03-14 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 module.exports = {
   \\"theme\\": {
     \\"animation\\": {
@@ -39,6 +39,7 @@ module.exports = {
       \\"light\\": {
         \\"colors\\": {
           \\"canvasDefaultTransparent\\": \\"rgba(255,255,255,0)\\",
+          \\"pageHeaderBg\\": \\"#f6f8fa\\",
           \\"marketingIcon\\": {
             \\"primary\\": \\"#218bff\\",
             \\"secondary\\": \\"#54aeff\\"
@@ -169,7 +170,7 @@ module.exports = {
             \\"lineDtFmBg\\": \\"#9a6700\\",
             \\"gateBg\\": \\"rgba(125,78,0,0.15)\\",
             \\"gateText\\": \\"#d0d7de\\",
-            \\"gateWaitingText\\": \\"#afb8c1\\",
+            \\"gateWaitingText\\": \\"#d4a72c\\",
             \\"stepHeaderOpenBg\\": \\"#32383f\\",
             \\"stepErrorText\\": \\"#ff8182\\",
             \\"stepWarningText\\": \\"#d4a72c\\",
@@ -224,6 +225,9 @@ module.exports = {
           \\"topicTag\\": {
             \\"border\\": \\"rgba(0,0,0,0)\\"
           },
+          \\"counter\\": {
+            \\"border\\": \\"rgba(0,0,0,0)\\"
+          },
           \\"selectMenu\\": {
             \\"backdropBorder\\": \\"rgba(0,0,0,0)\\",
             \\"tapHighlight\\": \\"rgba(175,184,193,0.5)\\",
@@ -232,6 +236,7 @@ module.exports = {
           \\"header\\": {
             \\"text\\": \\"rgba(255,255,255,0.7)\\",
             \\"bg\\": \\"#24292f\\",
+            \\"divider\\": \\"#57606a\\",
             \\"logo\\": \\"#ffffff\\"
           },
           \\"headerSearch\\": {
@@ -337,7 +342,9 @@ module.exports = {
             \\"inlineDivider\\": \\"rgba(208,215,222,0.48)\\",
             \\"default\\": {
               \\"hoverBg\\": \\"rgba(208,215,222,0.32)\\",
+              \\"hoverBorder\\": \\"rgba(0,0,0,0)\\",
               \\"activeBg\\": \\"rgba(208,215,222,0.48)\\",
+              \\"activeBorder\\": \\"rgba(0,0,0,0)\\",
               \\"selectedBg\\": \\"rgba(208,215,222,0.24)\\"
             },
             \\"danger\\": {
@@ -399,6 +406,18 @@ module.exports = {
             \\"muted\\": \\"rgba(255,129,130,0.4)\\",
             \\"subtle\\": \\"#FFEBE9\\"
           },
+          \\"open\\": {
+            \\"fg\\": \\"#1a7f37\\",
+            \\"emphasis\\": \\"#2da44e\\",
+            \\"muted\\": \\"rgba(74,194,107,0.4)\\",
+            \\"subtle\\": \\"#dafbe1\\"
+          },
+          \\"closed\\": {
+            \\"fg\\": \\"#cf222e\\",
+            \\"emphasis\\": \\"#cf222e\\",
+            \\"muted\\": \\"rgba(255,129,130,0.4)\\",
+            \\"subtle\\": \\"#FFEBE9\\"
+          },
           \\"done\\": {
             \\"fg\\": \\"#8250df\\",
             \\"emphasis\\": \\"#8250df\\",
@@ -485,20 +504,21 @@ module.exports = {
       \\"light_high_contrast\\": {
         \\"colors\\": {
           \\"canvasDefaultTransparent\\": \\"rgba(255,255,255,0)\\",
+          \\"pageHeaderBg\\": \\"#ffffff\\",
           \\"marketingIcon\\": {
             \\"primary\\": \\"#1168e3\\",
             \\"secondary\\": \\"#368cf9\\"
           },
           \\"diffBlob\\": {
             \\"addition\\": {
-              \\"numText\\": \\"#24292F\\",
+              \\"numText\\": \\"#0E1116\\",
               \\"fg\\": \\"#ffffff\\",
               \\"numBg\\": \\"#CCFFD8\\",
               \\"lineBg\\": \\"#E6FFEC\\",
               \\"wordBg\\": \\"#055d20\\"
             },
             \\"deletion\\": {
-              \\"numText\\": \\"#24292F\\",
+              \\"numText\\": \\"#0E1116\\",
               \\"fg\\": \\"#ffffff\\",
               \\"numBg\\": \\"#FFD7D5\\",
               \\"lineBg\\": \\"#fff0ee\\",
@@ -508,7 +528,7 @@ module.exports = {
               \\"numBg\\": \\"#9cd7ff\\"
             },
             \\"expander\\": {
-              \\"icon\\": \\"#24292F\\"
+              \\"icon\\": \\"#0E1116\\"
             }
           },
           \\"diffstat\\": {
@@ -521,10 +541,10 @@ module.exports = {
           },
           \\"prettylights\\": {
             \\"syntax\\": {
-              \\"comment\\": \\"#67707A\\",
+              \\"comment\\": \\"#66707B\\",
               \\"constant\\": \\"#023b95\\",
               \\"entity\\": \\"#622cbc\\",
-              \\"storageModifierImport\\": \\"#24292F\\",
+              \\"storageModifierImport\\": \\"#0E1116\\",
               \\"entityTag\\": \\"#024c1a\\",
               \\"keyword\\": \\"#a0111f\\",
               \\"string\\": \\"#032563\\",
@@ -537,8 +557,8 @@ module.exports = {
               \\"stringRegexp\\": \\"#024c1a\\",
               \\"markupList\\": \\"#2e1800\\",
               \\"markupHeading\\": \\"#023b95\\",
-              \\"markupItalic\\": \\"#24292F\\",
-              \\"markupBold\\": \\"#24292F\\",
+              \\"markupItalic\\": \\"#0E1116\\",
+              \\"markupBold\\": \\"#0E1116\\",
               \\"markupDeletedText\\": \\"#6e011a\\",
               \\"markupDeletedBg\\": \\"#fff0ee\\",
               \\"markupInsertedText\\": \\"#024c1a\\",
@@ -548,25 +568,25 @@ module.exports = {
               \\"markupIgnoredText\\": \\"#E7ECF0\\",
               \\"markupIgnoredBg\\": \\"#023b95\\",
               \\"metaDiffRange\\": \\"#622cbc\\",
-              \\"brackethighlighterAngle\\": \\"#4F5760\\",
+              \\"brackethighlighterAngle\\": \\"#4B535D\\",
               \\"sublimelinterGutterMark\\": \\"#88929D\\",
               \\"constantOtherReferenceLink\\": \\"#032563\\"
             }
           },
           \\"codemirror\\": {
-            \\"text\\": \\"#24292F\\",
+            \\"text\\": \\"#0E1116\\",
             \\"bg\\": \\"#ffffff\\",
             \\"guttersBg\\": \\"#ffffff\\",
             \\"guttermarkerText\\": \\"#ffffff\\",
-            \\"guttermarkerSubtleText\\": \\"#67707A\\",
-            \\"linenumberText\\": \\"#24292F\\",
-            \\"cursor\\": \\"#24292F\\",
+            \\"guttermarkerSubtleText\\": \\"#66707B\\",
+            \\"linenumberText\\": \\"#0E1116\\",
+            \\"cursor\\": \\"#0E1116\\",
             \\"selectionBg\\": \\"#368cf9\\",
             \\"activelineBg\\": \\"#E7ECF0\\",
-            \\"matchingbracketText\\": \\"#24292F\\",
+            \\"matchingbracketText\\": \\"#0E1116\\",
             \\"linesBg\\": \\"#ffffff\\",
             \\"syntax\\": {
-              \\"comment\\": \\"#24292F\\",
+              \\"comment\\": \\"#0E1116\\",
               \\"constant\\": \\"#023b95\\",
               \\"entity\\": \\"#622cbc\\",
               \\"keyword\\": \\"#a0111f\\",
@@ -577,7 +597,7 @@ module.exports = {
             }
           },
           \\"checks\\": {
-            \\"bg\\": \\"#24292F\\",
+            \\"bg\\": \\"#0E1116\\",
             \\"textPrimary\\": \\"#FFFFFF\\",
             \\"textSecondary\\": \\"#88929D\\",
             \\"textLink\\": \\"#368cf9\\",
@@ -587,36 +607,36 @@ module.exports = {
             \\"inputText\\": \\"#E7ECF0\\",
             \\"inputPlaceholderText\\": \\"#88929D\\",
             \\"inputFocusText\\": \\"#88929D\\",
-            \\"inputBg\\": \\"#30363D\\",
+            \\"inputBg\\": \\"#20252C\\",
             \\"donutError\\": \\"#d5232c\\",
             \\"donutPending\\": \\"#956400\\",
             \\"donutSuccess\\": \\"#117f32\\",
             \\"donutNeutral\\": \\"#ACB6C0\\",
             \\"dropdownText\\": \\"#ACB6C0\\",
-            \\"dropdownBg\\": \\"#30363D\\",
-            \\"dropdownBorder\\": \\"#3D454E\\",
+            \\"dropdownBg\\": \\"#20252C\\",
+            \\"dropdownBorder\\": \\"#343B43\\",
             \\"dropdownShadow\\": \\"rgba(1,4,9,0.3)\\",
             \\"dropdownHoverText\\": \\"#FFFFFF\\",
-            \\"dropdownHoverBg\\": \\"#3D454E\\",
+            \\"dropdownHoverBg\\": \\"#343B43\\",
             \\"dropdownBtnHoverText\\": \\"#FFFFFF\\",
-            \\"dropdownBtnHoverBg\\": \\"#30363D\\",
-            \\"scrollbarThumbBg\\": \\"#4F5760\\",
+            \\"dropdownBtnHoverBg\\": \\"#20252C\\",
+            \\"scrollbarThumbBg\\": \\"#4B535D\\",
             \\"headerLabelText\\": \\"#CED5DC\\",
             \\"headerLabelOpenText\\": \\"#FFFFFF\\",
-            \\"headerBorder\\": \\"#30363D\\",
+            \\"headerBorder\\": \\"#20252C\\",
             \\"headerIcon\\": \\"#88929D\\",
             \\"lineText\\": \\"#CED5DC\\",
             \\"lineNumText\\": \\"rgba(136,146,157,0.75)\\",
             \\"lineTimestampText\\": \\"#88929D\\",
-            \\"lineHoverBg\\": \\"#30363D\\",
+            \\"lineHoverBg\\": \\"#20252C\\",
             \\"lineSelectedBg\\": \\"rgba(17,104,227,0.15)\\",
             \\"lineSelectedNumText\\": \\"#368cf9\\",
-            \\"lineDtFmText\\": \\"#24292F\\",
+            \\"lineDtFmText\\": \\"#0E1116\\",
             \\"lineDtFmBg\\": \\"#744500\\",
             \\"gateBg\\": \\"rgba(96,55,0,0.15)\\",
             \\"gateText\\": \\"#CED5DC\\",
-            \\"gateWaitingText\\": \\"#ACB6C0\\",
-            \\"stepHeaderOpenBg\\": \\"#30363D\\",
+            \\"gateWaitingText\\": \\"#b58407\\",
+            \\"stepHeaderOpenBg\\": \\"#20252C\\",
             \\"stepErrorText\\": \\"#ee5a5d\\",
             \\"stepWarningText\\": \\"#b58407\\",
             \\"loglineText\\": \\"#88929D\\",
@@ -631,8 +651,8 @@ module.exports = {
             \\"loglineCommandText\\": \\"#368cf9\\",
             \\"loglineSectionText\\": \\"#26a148\\",
             \\"ansi\\": {
-              \\"black\\": \\"#24292F\\",
-              \\"blackBright\\": \\"#30363D\\",
+              \\"black\\": \\"#0E1116\\",
+              \\"blackBright\\": \\"#20252C\\",
               \\"white\\": \\"#CED5DC\\",
               \\"whiteBright\\": \\"#CED5DC\\",
               \\"gray\\": \\"#88929D\\",
@@ -651,7 +671,7 @@ module.exports = {
             }
           },
           \\"project\\": {
-            \\"headerBg\\": \\"#24292F\\",
+            \\"headerBg\\": \\"#0E1116\\",
             \\"sidebarBg\\": \\"#ffffff\\",
             \\"gradientIn\\": \\"#ffffff\\",
             \\"gradientOut\\": \\"rgba(255,255,255,0)\\"
@@ -668,7 +688,10 @@ module.exports = {
             \\"stackFadeMore\\": \\"#CED5DC\\"
           },
           \\"topicTag\\": {
-            \\"border\\": \\"rgba(0,0,0,0)\\"
+            \\"border\\": \\"#0349b4\\"
+          },
+          \\"counter\\": {
+            \\"border\\": \\"#20252C\\"
           },
           \\"selectMenu\\": {
             \\"backdropBorder\\": \\"rgba(0,0,0,0)\\",
@@ -677,12 +700,13 @@ module.exports = {
           },
           \\"header\\": {
             \\"text\\": \\"rgba(255,255,255,0.7)\\",
-            \\"bg\\": \\"#24292F\\",
+            \\"bg\\": \\"#0E1116\\",
+            \\"divider\\": \\"#ACB6C0\\",
             \\"logo\\": \\"#ffffff\\"
           },
           \\"headerSearch\\": {
-            \\"bg\\": \\"#24292F\\",
-            \\"border\\": \\"#4F5760\\"
+            \\"bg\\": \\"#0E1116\\",
+            \\"border\\": \\"#4B535D\\"
           },
           \\"sidenav\\": {
             \\"selectedBg\\": \\"#ffffff\\"
@@ -697,11 +721,11 @@ module.exports = {
             \\"badgeBg\\": \\"#E7ECF0\\"
           },
           \\"ansi\\": {
-            \\"black\\": \\"#24292F\\",
-            \\"blackBright\\": \\"#4F5760\\",
-            \\"white\\": \\"#67707A\\",
+            \\"black\\": \\"#0E1116\\",
+            \\"blackBright\\": \\"#4B535D\\",
+            \\"white\\": \\"#66707B\\",
             \\"whiteBright\\": \\"#88929D\\",
-            \\"gray\\": \\"#67707A\\",
+            \\"gray\\": \\"#66707B\\",
             \\"red\\": \\"#a0111f\\",
             \\"redBright\\": \\"#86061d\\",
             \\"green\\": \\"#024c1a\\",
@@ -716,7 +740,7 @@ module.exports = {
             \\"cyanBright\\": \\"#3192aa\\"
           },
           \\"btn\\": {
-            \\"text\\": \\"#24292F\\",
+            \\"text\\": \\"#0E1116\\",
             \\"bg\\": \\"#E7ECF0\\",
             \\"border\\": \\"rgba(1,4,9,0.8)\\",
             \\"hoverBg\\": \\"#CED5DC\\",
@@ -776,26 +800,28 @@ module.exports = {
             }
           },
           \\"underlinenav\\": {
-            \\"icon\\": \\"#67707A\\",
+            \\"icon\\": \\"#66707B\\",
             \\"borderHover\\": \\"rgba(172,182,192,0.2)\\"
           },
           \\"actionListItem\\": {
-            \\"inlineDivider\\": \\"rgba(48,54,61,0.48)\\",
+            \\"inlineDivider\\": \\"#88929D\\",
             \\"default\\": {
-              \\"hoverBg\\": \\"rgba(206,213,220,0.32)\\",
-              \\"activeBg\\": \\"rgba(206,213,220,0.48)\\",
-              \\"selectedBg\\": \\"rgba(206,213,220,0.24)\\"
+              \\"hoverBg\\": \\"#E7ECF0\\",
+              \\"hoverBorder\\": \\"#88929D\\",
+              \\"activeBg\\": \\"#CED5DC\\",
+              \\"activeBorder\\": \\"#20252C\\",
+              \\"selectedBg\\": \\"#CED5DC\\"
             },
             \\"danger\\": {
-              \\"hoverBg\\": \\"rgba(255,240,238,0.64)\\",
-              \\"activeBg\\": \\"#fff0ee\\",
-              \\"hoverText\\": \\"#a0111f\\"
+              \\"hoverBg\\": \\"#a0111f\\",
+              \\"activeBg\\": \\"#6e011a\\",
+              \\"hoverText\\": \\"#ffffff\\"
             }
           },
           \\"fg\\": {
-            \\"default\\": \\"#24292F\\",
-            \\"muted\\": \\"#24292F\\",
-            \\"subtle\\": \\"#67707A\\",
+            \\"default\\": \\"#0E1116\\",
+            \\"muted\\": \\"#0E1116\\",
+            \\"subtle\\": \\"#66707B\\",
             \\"onEmphasis\\": \\"#ffffff\\"
           },
           \\"canvas\\": {
@@ -805,13 +831,13 @@ module.exports = {
             \\"subtle\\": \\"#E7ECF0\\"
           },
           \\"border\\": {
-            \\"default\\": \\"#30363D\\",
+            \\"default\\": \\"#20252C\\",
             \\"muted\\": \\"#88929D\\",
             \\"subtle\\": \\"rgba(1,4,9,0.8)\\"
           },
           \\"neutral\\": {
-            \\"emphasisPlus\\": \\"#24292F\\",
-            \\"emphasis\\": \\"#67707A\\",
+            \\"emphasisPlus\\": \\"#0E1116\\",
+            \\"emphasis\\": \\"#66707B\\",
             \\"muted\\": \\"rgba(172,182,192,0.2)\\",
             \\"subtle\\": \\"#E7ECF0\\"
           },
@@ -845,6 +871,18 @@ module.exports = {
             \\"muted\\": \\"#ee5a5d\\",
             \\"subtle\\": \\"#fff0ee\\"
           },
+          \\"open\\": {
+            \\"fg\\": \\"#055d20\\",
+            \\"emphasis\\": \\"#117f32\\",
+            \\"muted\\": \\"rgba(38,161,72,0.4)\\",
+            \\"subtle\\": \\"#d2fedb\\"
+          },
+          \\"closed\\": {
+            \\"fg\\": \\"#a0111f\\",
+            \\"emphasis\\": \\"#a0111f\\",
+            \\"muted\\": \\"rgba(238,90,93,0.4)\\",
+            \\"subtle\\": \\"#fff0ee\\"
+          },
           \\"done\\": {
             \\"fg\\": \\"#622cbc\\",
             \\"emphasis\\": \\"#622cbc\\",
@@ -886,7 +924,7 @@ module.exports = {
             \\"childShadow\\": \\"-2px -2px 0 rgba(255,255,255,0.8)\\"
           },
           \\"overlay\\": {
-            \\"shadow\\": \\"0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(61,69,78,0.12)\\"
+            \\"shadow\\": \\"0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12)\\"
           },
           \\"btn\\": {
             \\"shadow\\": \\"0 1px 0 rgba(1,4,9,0.04)\\",
@@ -931,6 +969,7 @@ module.exports = {
       \\"light_colorblind\\": {
         \\"colors\\": {
           \\"canvasDefaultTransparent\\": \\"rgba(255,255,255,0)\\",
+          \\"pageHeaderBg\\": \\"#f6f8fa\\",
           \\"marketingIcon\\": {
             \\"primary\\": \\"#218bff\\",
             \\"secondary\\": \\"#54aeff\\"
@@ -939,16 +978,16 @@ module.exports = {
             \\"addition\\": {
               \\"numText\\": \\"#24292f\\",
               \\"fg\\": \\"#24292f\\",
-              \\"numBg\\": \\"rgba(53,173,255,0.4)\\",
-              \\"lineBg\\": \\"rgba(192,246,255,0.5)\\",
-              \\"wordBg\\": \\"rgba(53,173,255,0.4)\\"
+              \\"numBg\\": \\"rgba(84,174,255,0.4)\\",
+              \\"lineBg\\": \\"rgba(221,244,255,0.5)\\",
+              \\"wordBg\\": \\"rgba(84,174,255,0.4)\\"
             },
             \\"deletion\\": {
               \\"numText\\": \\"#24292f\\",
               \\"fg\\": \\"#24292f\\",
-              \\"numBg\\": \\"rgba(231,161,0,0.4)\\",
-              \\"lineBg\\": \\"rgba(254,254,72,0.5)\\",
-              \\"wordBg\\": \\"rgba(248,194,0,0.5)\\"
+              \\"numBg\\": \\"rgba(247,153,57,0.4)\\",
+              \\"lineBg\\": \\"rgba(255,245,232,0.5)\\",
+              \\"wordBg\\": \\"rgba(255,188,109,0.5)\\"
             },
             \\"hunk\\": {
               \\"numBg\\": \\"rgba(84,174,255,0.4)\\"
@@ -960,7 +999,7 @@ module.exports = {
           \\"diffstat\\": {
             \\"deletionBorder\\": \\"rgba(27,31,36,0.15)\\",
             \\"additionBorder\\": \\"rgba(27,31,36,0.15)\\",
-            \\"additionBg\\": \\"#0088ff\\"
+            \\"additionBg\\": \\"#218bff\\"
           },
           \\"searchKeyword\\": {
             \\"hl\\": \\"#fff8c5\\"
@@ -971,26 +1010,26 @@ module.exports = {
               \\"constant\\": \\"#0550ae\\",
               \\"entity\\": \\"#8250df\\",
               \\"storageModifierImport\\": \\"#24292f\\",
-              \\"entityTag\\": \\"#054da9\\",
-              \\"keyword\\": \\"#ac5e00\\",
+              \\"entityTag\\": \\"#0550ae\\",
+              \\"keyword\\": \\"#b35900\\",
               \\"string\\": \\"#0a3069\\",
-              \\"variable\\": \\"#953800\\",
-              \\"brackethighlighterUnmatched\\": \\"#6c3900\\",
+              \\"variable\\": \\"#8a4600\\",
+              \\"brackethighlighterUnmatched\\": \\"#6f3800\\",
               \\"invalidIllegalText\\": \\"#f6f8fa\\",
-              \\"invalidIllegalBg\\": \\"#6c3900\\",
+              \\"invalidIllegalBg\\": \\"#6f3800\\",
               \\"carriageReturnText\\": \\"#f6f8fa\\",
-              \\"carriageReturnBg\\": \\"#ac5e00\\",
-              \\"stringRegexp\\": \\"#054da9\\",
+              \\"carriageReturnBg\\": \\"#b35900\\",
+              \\"stringRegexp\\": \\"#0550ae\\",
               \\"markupList\\": \\"#3b2300\\",
               \\"markupHeading\\": \\"#0550ae\\",
               \\"markupItalic\\": \\"#24292f\\",
               \\"markupBold\\": \\"#24292f\\",
-              \\"markupDeletedText\\": \\"#6c3900\\",
-              \\"markupDeletedBg\\": \\"#fefe48\\",
-              \\"markupInsertedText\\": \\"#054da9\\",
-              \\"markupInsertedBg\\": \\"#c0f6ff\\",
-              \\"markupChangedText\\": \\"#953800\\",
-              \\"markupChangedBg\\": \\"#ffd8b5\\",
+              \\"markupDeletedText\\": \\"#6f3800\\",
+              \\"markupDeletedBg\\": \\"#fff5e8\\",
+              \\"markupInsertedText\\": \\"#0550ae\\",
+              \\"markupInsertedBg\\": \\"#ddf4ff\\",
+              \\"markupChangedText\\": \\"#8a4600\\",
+              \\"markupChangedBg\\": \\"#ffddb0\\",
               \\"markupIgnoredText\\": \\"#eaeef2\\",
               \\"markupIgnoredBg\\": \\"#0550ae\\",
               \\"metaDiffRange\\": \\"#8250df\\",
@@ -1015,11 +1054,11 @@ module.exports = {
               \\"comment\\": \\"#24292f\\",
               \\"constant\\": \\"#0550ae\\",
               \\"entity\\": \\"#8250df\\",
-              \\"keyword\\": \\"#ac5e00\\",
-              \\"storage\\": \\"#ac5e00\\",
+              \\"keyword\\": \\"#b35900\\",
+              \\"storage\\": \\"#b35900\\",
               \\"string\\": \\"#0a3069\\",
               \\"support\\": \\"#0550ae\\",
-              \\"variable\\": \\"#953800\\"
+              \\"variable\\": \\"#8a4600\\"
             }
           },
           \\"checks\\": {
@@ -1034,9 +1073,9 @@ module.exports = {
             \\"inputPlaceholderText\\": \\"#8c959f\\",
             \\"inputFocusText\\": \\"#8c959f\\",
             \\"inputBg\\": \\"#32383f\\",
-            \\"donutError\\": \\"#d08002\\",
+            \\"donutError\\": \\"#dd7815\\",
             \\"donutPending\\": \\"#bf8700\\",
-            \\"donutSuccess\\": \\"#0088ff\\",
+            \\"donutSuccess\\": \\"#218bff\\",
             \\"donutNeutral\\": \\"#afb8c1\\",
             \\"dropdownText\\": \\"#afb8c1\\",
             \\"dropdownBg\\": \\"#32383f\\",
@@ -1061,31 +1100,31 @@ module.exports = {
             \\"lineDtFmBg\\": \\"#9a6700\\",
             \\"gateBg\\": \\"rgba(125,78,0,0.15)\\",
             \\"gateText\\": \\"#d0d7de\\",
-            \\"gateWaitingText\\": \\"#afb8c1\\",
+            \\"gateWaitingText\\": \\"#d4a72c\\",
             \\"stepHeaderOpenBg\\": \\"#32383f\\",
-            \\"stepErrorText\\": \\"#e7a100\\",
+            \\"stepErrorText\\": \\"#f79939\\",
             \\"stepWarningText\\": \\"#d4a72c\\",
             \\"loglineText\\": \\"#8c959f\\",
             \\"loglineNumText\\": \\"rgba(140,149,159,0.75)\\",
             \\"loglineDebugText\\": \\"#c297ff\\",
             \\"loglineErrorText\\": \\"#d0d7de\\",
-            \\"loglineErrorNumText\\": \\"#e7a100\\",
-            \\"loglineErrorBg\\": \\"rgba(139,70,0,0.15)\\",
+            \\"loglineErrorNumText\\": \\"#f79939\\",
+            \\"loglineErrorBg\\": \\"rgba(138,70,0,0.15)\\",
             \\"loglineWarningText\\": \\"#d0d7de\\",
             \\"loglineWarningNumText\\": \\"#d4a72c\\",
             \\"loglineWarningBg\\": \\"rgba(125,78,0,0.15)\\",
             \\"loglineCommandText\\": \\"#54aeff\\",
-            \\"loglineSectionText\\": \\"#35adff\\",
+            \\"loglineSectionText\\": \\"#54aeff\\",
             \\"ansi\\": {
               \\"black\\": \\"#24292f\\",
               \\"blackBright\\": \\"#32383f\\",
               \\"white\\": \\"#d0d7de\\",
               \\"whiteBright\\": \\"#d0d7de\\",
               \\"gray\\": \\"#8c959f\\",
-              \\"red\\": \\"#e7a100\\",
-              \\"redBright\\": \\"#f8c200\\",
-              \\"green\\": \\"#35adff\\",
-              \\"greenBright\\": \\"#65ccff\\",
+              \\"red\\": \\"#f79939\\",
+              \\"redBright\\": \\"#ffbc6d\\",
+              \\"green\\": \\"#54aeff\\",
+              \\"greenBright\\": \\"#80ccff\\",
               \\"yellow\\": \\"#d4a72c\\",
               \\"yellowBright\\": \\"#eac54f\\",
               \\"blue\\": \\"#54aeff\\",
@@ -1116,6 +1155,9 @@ module.exports = {
           \\"topicTag\\": {
             \\"border\\": \\"rgba(0,0,0,0)\\"
           },
+          \\"counter\\": {
+            \\"border\\": \\"rgba(0,0,0,0)\\"
+          },
           \\"selectMenu\\": {
             \\"backdropBorder\\": \\"rgba(0,0,0,0)\\",
             \\"tapHighlight\\": \\"rgba(175,184,193,0.5)\\",
@@ -1124,6 +1166,7 @@ module.exports = {
           \\"header\\": {
             \\"text\\": \\"rgba(255,255,255,0.7)\\",
             \\"bg\\": \\"#24292f\\",
+            \\"divider\\": \\"#57606a\\",
             \\"logo\\": \\"#ffffff\\"
           },
           \\"headerSearch\\": {
@@ -1148,10 +1191,10 @@ module.exports = {
             \\"white\\": \\"#6e7781\\",
             \\"whiteBright\\": \\"#8c959f\\",
             \\"gray\\": \\"#6e7781\\",
-            \\"red\\": \\"#ac5e00\\",
-            \\"redBright\\": \\"#8b4600\\",
-            \\"green\\": \\"#054da9\\",
-            \\"greenBright\\": \\"#0566d5\\",
+            \\"red\\": \\"#b35900\\",
+            \\"redBright\\": \\"#8a4600\\",
+            \\"green\\": \\"#0550ae\\",
+            \\"greenBright\\": \\"#0969da\\",
             \\"yellow\\": \\"#4d2d00\\",
             \\"yellowBright\\": \\"#633c01\\",
             \\"blue\\": \\"#0969da\\",
@@ -1175,15 +1218,15 @@ module.exports = {
             \\"counterBg\\": \\"rgba(27,31,36,0.08)\\",
             \\"primary\\": {
               \\"text\\": \\"#ffffff\\",
-              \\"bg\\": \\"#0088ff\\",
+              \\"bg\\": \\"#218bff\\",
               \\"border\\": \\"rgba(27,31,36,0.15)\\",
-              \\"hoverBg\\": \\"#0566d5\\",
+              \\"hoverBg\\": \\"#0969da\\",
               \\"hoverBorder\\": \\"rgba(27,31,36,0.15)\\",
-              \\"selectedBg\\": \\"hsla(212,95%,41%,1)\\",
+              \\"selectedBg\\": \\"hsla(212,92%,43%,1)\\",
               \\"disabledText\\": \\"rgba(255,255,255,0.8)\\",
-              \\"disabledBg\\": \\"#65ccff\\",
+              \\"disabledBg\\": \\"#80ccff\\",
               \\"disabledBorder\\": \\"rgba(27,31,36,0.15)\\",
-              \\"focusBg\\": \\"#0088ff\\",
+              \\"focusBg\\": \\"#218bff\\",
               \\"focusBorder\\": \\"rgba(27,31,36,0.15)\\",
               \\"icon\\": \\"rgba(255,255,255,0.8)\\",
               \\"counterBg\\": \\"rgba(255,255,255,0.2)\\"
@@ -1204,20 +1247,20 @@ module.exports = {
               \\"counterBg\\": \\"rgba(9,105,218,0.1)\\"
             },
             \\"danger\\": {
-              \\"text\\": \\"#ac5e00\\",
+              \\"text\\": \\"#b35900\\",
               \\"hoverText\\": \\"#ffffff\\",
-              \\"hoverBg\\": \\"#8b4600\\",
+              \\"hoverBg\\": \\"#8a4600\\",
               \\"hoverBorder\\": \\"rgba(27,31,36,0.15)\\",
               \\"hoverCounterBg\\": \\"rgba(255,255,255,0.2)\\",
               \\"selectedText\\": \\"#ffffff\\",
-              \\"selectedBg\\": \\"hsla(33,100%,31%,1)\\",
+              \\"selectedBg\\": \\"hsla(30,100%,32%,1)\\",
               \\"selectedBorder\\": \\"rgba(27,31,36,0.15)\\",
-              \\"disabledText\\": \\"rgba(172,94,0,0.5)\\",
+              \\"disabledText\\": \\"rgba(179,89,0,0.5)\\",
               \\"disabledBg\\": \\"#f6f8fa\\",
-              \\"disabledCounterBg\\": \\"rgba(172,94,0,0.05)\\",
+              \\"disabledCounterBg\\": \\"rgba(179,89,0,0.05)\\",
               \\"focusBorder\\": \\"rgba(27,31,36,0.15)\\",
-              \\"counterBg\\": \\"rgba(172,94,0,0.1)\\",
-              \\"icon\\": \\"#ac5e00\\",
+              \\"counterBg\\": \\"rgba(179,89,0,0.1)\\",
+              \\"icon\\": \\"#b35900\\",
               \\"hoverIcon\\": \\"#ffffff\\"
             }
           },
@@ -1229,13 +1272,15 @@ module.exports = {
             \\"inlineDivider\\": \\"rgba(208,215,222,0.48)\\",
             \\"default\\": {
               \\"hoverBg\\": \\"rgba(208,215,222,0.32)\\",
+              \\"hoverBorder\\": \\"rgba(0,0,0,0)\\",
               \\"activeBg\\": \\"rgba(208,215,222,0.48)\\",
+              \\"activeBorder\\": \\"rgba(0,0,0,0)\\",
               \\"selectedBg\\": \\"rgba(208,215,222,0.24)\\"
             },
             \\"danger\\": {
-              \\"hoverBg\\": \\"rgba(254,254,72,0.64)\\",
-              \\"activeBg\\": \\"#fefe48\\",
-              \\"hoverText\\": \\"#ac5e00\\"
+              \\"hoverBg\\": \\"rgba(255,245,232,0.64)\\",
+              \\"activeBg\\": \\"#fff5e8\\",
+              \\"hoverText\\": \\"#b35900\\"
             }
           },
           \\"fg\\": {
@@ -1268,10 +1313,10 @@ module.exports = {
             \\"subtle\\": \\"#ddf4ff\\"
           },
           \\"success\\": {
-            \\"fg\\": \\"#0566d5\\",
-            \\"emphasis\\": \\"#0088ff\\",
-            \\"muted\\": \\"rgba(53,173,255,0.4)\\",
-            \\"subtle\\": \\"#c0f6ff\\"
+            \\"fg\\": \\"#0969da\\",
+            \\"emphasis\\": \\"#218bff\\",
+            \\"muted\\": \\"rgba(84,174,255,0.4)\\",
+            \\"subtle\\": \\"#ddf4ff\\"
           },
           \\"attention\\": {
             \\"fg\\": \\"#9a6700\\",
@@ -1280,16 +1325,28 @@ module.exports = {
             \\"subtle\\": \\"#fff8c5\\"
           },
           \\"severe\\": {
-            \\"fg\\": \\"#bc4c00\\",
-            \\"emphasis\\": \\"#bc4c00\\",
-            \\"muted\\": \\"rgba(251,143,68,0.4)\\",
-            \\"subtle\\": \\"#fff1e5\\"
+            \\"fg\\": \\"#b35900\\",
+            \\"emphasis\\": \\"#b35900\\",
+            \\"muted\\": \\"rgba(247,153,57,0.4)\\",
+            \\"subtle\\": \\"#fff5e8\\"
           },
           \\"danger\\": {
-            \\"fg\\": \\"#ac5e00\\",
-            \\"emphasis\\": \\"#ac5e00\\",
-            \\"muted\\": \\"rgba(231,161,0,0.4)\\",
-            \\"subtle\\": \\"#fefe48\\"
+            \\"fg\\": \\"#b35900\\",
+            \\"emphasis\\": \\"#b35900\\",
+            \\"muted\\": \\"rgba(247,153,57,0.4)\\",
+            \\"subtle\\": \\"#fff5e8\\"
+          },
+          \\"open\\": {
+            \\"fg\\": \\"#b35900\\",
+            \\"emphasis\\": \\"#dd7815\\",
+            \\"muted\\": \\"rgba(247,153,57,0.4)\\",
+            \\"subtle\\": \\"#fff5e8\\"
+          },
+          \\"closed\\": {
+            \\"fg\\": \\"#6e7781\\",
+            \\"emphasis\\": \\"#6e7781\\",
+            \\"muted\\": \\"rgba(175,184,193,0.4)\\",
+            \\"subtle\\": \\"#f6f8fa\\"
           },
           \\"done\\": {
             \\"fg\\": \\"#8250df\\",
@@ -1343,8 +1400,8 @@ module.exports = {
             \\"primary\\": {
               \\"shadow\\": \\"0 1px 0 rgba(27,31,36,0.1)\\",
               \\"insetShadow\\": \\"inset 0 1px 0 rgba(255,255,255,0.03)\\",
-              \\"selectedShadow\\": \\"inset 0 1px 0 rgba(0,31,80,0.2)\\",
-              \\"focusShadow\\": \\"0 0 0 3px rgba(0,136,255,0.4)\\"
+              \\"selectedShadow\\": \\"inset 0 1px 0 rgba(0,33,85,0.2)\\",
+              \\"focusShadow\\": \\"0 0 0 3px rgba(33,139,255,0.4)\\"
             },
             \\"outline\\": {
               \\"hoverShadow\\": \\"0 1px 0 rgba(27,31,36,0.1)\\",
@@ -1355,8 +1412,8 @@ module.exports = {
             \\"danger\\": {
               \\"hoverShadow\\": \\"0 1px 0 rgba(27,31,36,0.1)\\",
               \\"hoverInsetShadow\\": \\"inset 0 1px 0 rgba(255,255,255,0.03)\\",
-              \\"selectedShadow\\": \\"inset 0 1px 0 rgba(47,41,0,0.2)\\",
-              \\"focusShadow\\": \\"0 0 0 3px rgba(139,70,0,0.4)\\"
+              \\"selectedShadow\\": \\"inset 0 1px 0 rgba(65,32,0,0.2)\\",
+              \\"focusShadow\\": \\"0 0 0 3px rgba(138,70,0,0.4)\\"
             }
           },
           \\"shadow\\": {
@@ -1377,6 +1434,7 @@ module.exports = {
       \\"dark\\": {
         \\"colors\\": {
           \\"canvasDefaultTransparent\\": \\"rgba(13,17,23,0)\\",
+          \\"pageHeaderBg\\": \\"#0d1117\\",
           \\"marketingIcon\\": {
             \\"primary\\": \\"#79c0ff\\",
             \\"secondary\\": \\"#1f6feb\\"
@@ -1503,7 +1561,7 @@ module.exports = {
             \\"lineHoverBg\\": \\"rgba(110,118,129,0.1)\\",
             \\"lineSelectedBg\\": \\"rgba(56,139,253,0.15)\\",
             \\"lineSelectedNumText\\": \\"#58a6ff\\",
-            \\"lineDtFmText\\": \\"#f0f6fc\\",
+            \\"lineDtFmText\\": \\"#ffffff\\",
             \\"lineDtFmBg\\": \\"#9e6a03\\",
             \\"gateBg\\": \\"rgba(187,128,9,0.15)\\",
             \\"gateText\\": \\"#8b949e\\",
@@ -1554,7 +1612,7 @@ module.exports = {
             }
           },
           \\"avatar\\": {
-            \\"bg\\": \\"rgba(240,246,252,0.1)\\",
+            \\"bg\\": \\"rgba(255,255,255,0.1)\\",
             \\"border\\": \\"rgba(240,246,252,0.1)\\",
             \\"stackFade\\": \\"#30363d\\",
             \\"stackFadeMore\\": \\"#21262d\\"
@@ -1562,14 +1620,18 @@ module.exports = {
           \\"topicTag\\": {
             \\"border\\": \\"rgba(0,0,0,0)\\"
           },
+          \\"counter\\": {
+            \\"border\\": \\"rgba(0,0,0,0)\\"
+          },
           \\"selectMenu\\": {
             \\"backdropBorder\\": \\"#484f58\\",
             \\"tapHighlight\\": \\"rgba(48,54,61,0.5)\\",
             \\"tapFocusBg\\": \\"#0c2d6b\\"
           },
           \\"header\\": {
-            \\"text\\": \\"rgba(240,246,252,0.7)\\",
+            \\"text\\": \\"rgba(255,255,255,0.7)\\",
             \\"bg\\": \\"#161b22\\",
+            \\"divider\\": \\"#8b949e\\",
             \\"logo\\": \\"#f0f6fc\\"
           },
           \\"headerSearch\\": {
@@ -1592,7 +1654,7 @@ module.exports = {
             \\"black\\": \\"#484f58\\",
             \\"blackBright\\": \\"#6e7681\\",
             \\"white\\": \\"#b1bac4\\",
-            \\"whiteBright\\": \\"#f0f6fc\\",
+            \\"whiteBright\\": \\"#ffffff\\",
             \\"gray\\": \\"#6e7681\\",
             \\"red\\": \\"#ff7b72\\",
             \\"redBright\\": \\"#ffa198\\",
@@ -1626,21 +1688,21 @@ module.exports = {
               \\"hoverBg\\": \\"#2ea043\\",
               \\"hoverBorder\\": \\"rgba(240,246,252,0.1)\\",
               \\"selectedBg\\": \\"#238636\\",
-              \\"disabledText\\": \\"rgba(240,246,252,0.5)\\",
+              \\"disabledText\\": \\"rgba(255,255,255,0.5)\\",
               \\"disabledBg\\": \\"rgba(35,134,54,0.6)\\",
               \\"disabledBorder\\": \\"rgba(240,246,252,0.1)\\",
               \\"focusBg\\": \\"#238636\\",
               \\"focusBorder\\": \\"rgba(240,246,252,0.1)\\",
-              \\"icon\\": \\"#f0f6fc\\",
-              \\"counterBg\\": \\"rgba(240,246,252,0.2)\\"
+              \\"icon\\": \\"#ffffff\\",
+              \\"counterBg\\": \\"rgba(255,255,255,0.2)\\"
             },
             \\"outline\\": {
               \\"text\\": \\"#58a6ff\\",
               \\"hoverText\\": \\"#58a6ff\\",
               \\"hoverBg\\": \\"#30363d\\",
               \\"hoverBorder\\": \\"rgba(240,246,252,0.1)\\",
-              \\"hoverCounterBg\\": \\"rgba(240,246,252,0.2)\\",
-              \\"selectedText\\": \\"#f0f6fc\\",
+              \\"hoverCounterBg\\": \\"rgba(255,255,255,0.2)\\",
+              \\"selectedText\\": \\"#ffffff\\",
               \\"selectedBg\\": \\"#0d419d\\",
               \\"selectedBorder\\": \\"rgba(240,246,252,0.1)\\",
               \\"disabledText\\": \\"rgba(88,166,255,0.5)\\",
@@ -1651,10 +1713,10 @@ module.exports = {
             },
             \\"danger\\": {
               \\"text\\": \\"#f85149\\",
-              \\"hoverText\\": \\"#f0f6fc\\",
+              \\"hoverText\\": \\"#ffffff\\",
               \\"hoverBg\\": \\"#da3633\\",
               \\"hoverBorder\\": \\"#f85149\\",
-              \\"hoverIcon\\": \\"#f0f6fc\\",
+              \\"hoverIcon\\": \\"#ffffff\\",
               \\"hoverCounterBg\\": \\"rgba(255,255,255,0.2)\\",
               \\"selectedText\\": \\"#ffffff\\",
               \\"selectedBg\\": \\"#b62324\\",
@@ -1675,7 +1737,9 @@ module.exports = {
             \\"inlineDivider\\": \\"rgba(48,54,61,0.48)\\",
             \\"default\\": {
               \\"hoverBg\\": \\"rgba(177,186,196,0.12)\\",
+              \\"hoverBorder\\": \\"rgba(0,0,0,0)\\",
               \\"activeBg\\": \\"rgba(177,186,196,0.2)\\",
+              \\"activeBorder\\": \\"rgba(0,0,0,0)\\",
               \\"selectedBg\\": \\"rgba(177,186,196,0.08)\\"
             },
             \\"danger\\": {
@@ -1688,7 +1752,7 @@ module.exports = {
             \\"default\\": \\"#c9d1d9\\",
             \\"muted\\": \\"#8b949e\\",
             \\"subtle\\": \\"#484f58\\",
-            \\"onEmphasis\\": \\"#f0f6fc\\"
+            \\"onEmphasis\\": \\"#ffffff\\"
           },
           \\"canvas\\": {
             \\"default\\": \\"#0d1117\\",
@@ -1737,6 +1801,18 @@ module.exports = {
             \\"muted\\": \\"rgba(248,81,73,0.4)\\",
             \\"subtle\\": \\"rgba(248,81,73,0.15)\\"
           },
+          \\"open\\": {
+            \\"fg\\": \\"#3fb950\\",
+            \\"emphasis\\": \\"#238636\\",
+            \\"muted\\": \\"rgba(46,160,67,0.4)\\",
+            \\"subtle\\": \\"rgba(46,160,67,0.15)\\"
+          },
+          \\"closed\\": {
+            \\"fg\\": \\"#f85149\\",
+            \\"emphasis\\": \\"#da3633\\",
+            \\"muted\\": \\"rgba(248,81,73,0.4)\\",
+            \\"subtle\\": \\"rgba(248,81,73,0.15)\\"
+          },
           \\"done\\": {
             \\"fg\\": \\"#a371f7\\",
             \\"emphasis\\": \\"#8957e5\\",
@@ -1759,7 +1835,7 @@ module.exports = {
             },
             \\"border\\": {
               \\"active\\": \\"#F78166\\",
-              \\"contrast\\": \\"rgba(240,246,252,0.2)\\"
+              \\"contrast\\": \\"rgba(255,255,255,0.2)\\"
             }
           }
         },
@@ -1797,7 +1873,7 @@ module.exports = {
             },
             \\"outline\\": {
               \\"hoverShadow\\": \\"0 1px 0 rgba(1,4,9,0.1)\\",
-              \\"hoverInsetShadow\\": \\"inset 0 1px 0 rgba(240,246,252,0.03)\\",
+              \\"hoverInsetShadow\\": \\"inset 0 1px 0 rgba(255,255,255,0.03)\\",
               \\"selectedShadow\\": \\"0 0 transparent\\",
               \\"focusShadow\\": \\"0 0 0 3px rgba(17,88,199,0.4)\\"
             },
@@ -1826,6 +1902,7 @@ module.exports = {
       \\"dark_dimmed\\": {
         \\"colors\\": {
           \\"canvasDefaultTransparent\\": \\"rgba(34,39,46,0)\\",
+          \\"pageHeaderBg\\": \\"#22272e\\",
           \\"marketingIcon\\": {
             \\"primary\\": \\"#6cb6ff\\",
             \\"secondary\\": \\"#316dca\\"
@@ -2011,6 +2088,9 @@ module.exports = {
           \\"topicTag\\": {
             \\"border\\": \\"rgba(0,0,0,0)\\"
           },
+          \\"counter\\": {
+            \\"border\\": \\"rgba(0,0,0,0)\\"
+          },
           \\"selectMenu\\": {
             \\"backdropBorder\\": \\"#545d68\\",
             \\"tapHighlight\\": \\"rgba(68,76,86,0.5)\\",
@@ -2019,6 +2099,7 @@ module.exports = {
           \\"header\\": {
             \\"text\\": \\"rgba(205,217,229,0.7)\\",
             \\"bg\\": \\"#2d333b\\",
+            \\"divider\\": \\"#768390\\",
             \\"logo\\": \\"#cdd9e5\\"
           },
           \\"headerSearch\\": {
@@ -2124,7 +2205,9 @@ module.exports = {
             \\"inlineDivider\\": \\"rgba(68,76,86,0.48)\\",
             \\"default\\": {
               \\"hoverBg\\": \\"rgba(144,157,171,0.12)\\",
+              \\"hoverBorder\\": \\"rgba(0,0,0,0)\\",
               \\"activeBg\\": \\"rgba(144,157,171,0.2)\\",
+              \\"activeBorder\\": \\"rgba(0,0,0,0)\\",
               \\"selectedBg\\": \\"rgba(144,157,171,0.08)\\"
             },
             \\"danger\\": {
@@ -2186,6 +2269,18 @@ module.exports = {
             \\"muted\\": \\"rgba(229,83,75,0.4)\\",
             \\"subtle\\": \\"rgba(229,83,75,0.15)\\"
           },
+          \\"open\\": {
+            \\"fg\\": \\"#57ab5a\\",
+            \\"emphasis\\": \\"#347d39\\",
+            \\"muted\\": \\"rgba(70,149,74,0.4)\\",
+            \\"subtle\\": \\"rgba(70,149,74,0.15)\\"
+          },
+          \\"closed\\": {
+            \\"fg\\": \\"#e5534b\\",
+            \\"emphasis\\": \\"#c93c37\\",
+            \\"muted\\": \\"rgba(229,83,75,0.4)\\",
+            \\"subtle\\": \\"rgba(229,83,75,0.15)\\"
+          },
           \\"done\\": {
             \\"fg\\": \\"#986ee2\\",
             \\"emphasis\\": \\"#8256d0\\",
@@ -2275,6 +2370,7 @@ module.exports = {
       \\"dark_high_contrast\\": {
         \\"colors\\": {
           \\"canvasDefaultTransparent\\": \\"rgba(10,12,16,0)\\",
+          \\"pageHeaderBg\\": \\"#0a0c10\\",
           \\"marketingIcon\\": {
             \\"primary\\": \\"#91cbff\\",
             \\"secondary\\": \\"#409eff\\"
@@ -2298,7 +2394,7 @@ module.exports = {
               \\"numBg\\": \\"rgba(64,158,255,0.4)\\"
             },
             \\"expander\\": {
-              \\"icon\\": \\"#0a0c10\\"
+              \\"icon\\": \\"#f0f3f6\\"
             }
           },
           \\"diffstat\\": {
@@ -2460,6 +2556,9 @@ module.exports = {
           \\"topicTag\\": {
             \\"border\\": \\"#409eff\\"
           },
+          \\"counter\\": {
+            \\"border\\": \\"rgba(0,0,0,0)\\"
+          },
           \\"selectMenu\\": {
             \\"backdropBorder\\": \\"#7a828e\\",
             \\"tapHighlight\\": \\"rgba(82,89,100,0.5)\\",
@@ -2468,6 +2567,7 @@ module.exports = {
           \\"header\\": {
             \\"text\\": \\"rgba(255,255,255,0.7)\\",
             \\"bg\\": \\"#272b33\\",
+            \\"divider\\": \\"#bdc4cc\\",
             \\"logo\\": \\"#ffffff\\"
           },
           \\"headerSearch\\": {
@@ -2572,9 +2672,11 @@ module.exports = {
           \\"actionListItem\\": {
             \\"inlineDivider\\": \\"#7a828e\\",
             \\"default\\": {
-              \\"hoverBg\\": \\"rgba(217,222,227,0.12)\\",
-              \\"activeBg\\": \\"rgba(217,222,227,0.24)\\",
-              \\"selectedBg\\": \\"rgba(217,222,227,0.08)\\"
+              \\"hoverBg\\": \\"#272b33\\",
+              \\"hoverBorder\\": \\"#7a828e\\",
+              \\"activeBg\\": \\"#525964\\",
+              \\"activeBorder\\": \\"#9ea7b3\\",
+              \\"selectedBg\\": \\"#525964\\"
             },
             \\"danger\\": {
               \\"hoverBg\\": \\"#ff6a69\\",
@@ -2635,6 +2737,18 @@ module.exports = {
             \\"muted\\": \\"#ff6a69\\",
             \\"subtle\\": \\"rgba(255,106,105,0.15)\\"
           },
+          \\"open\\": {
+            \\"fg\\": \\"#26cd4d\\",
+            \\"emphasis\\": \\"#09b43a\\",
+            \\"muted\\": \\"rgba(9,180,58,0.4)\\",
+            \\"subtle\\": \\"rgba(9,180,58,0.15)\\"
+          },
+          \\"closed\\": {
+            \\"fg\\": \\"#ff6a69\\",
+            \\"emphasis\\": \\"#ff6a69\\",
+            \\"muted\\": \\"rgba(255,106,105,0.4)\\",
+            \\"subtle\\": \\"rgba(255,106,105,0.15)\\"
+          },
           \\"done\\": {
             \\"fg\\": \\"#b780ff\\",
             \\"emphasis\\": \\"#b87fff\\",
@@ -2724,6 +2838,7 @@ module.exports = {
       \\"dark_colorblind\\": {
         \\"colors\\": {
           \\"canvasDefaultTransparent\\": \\"rgba(13,17,23,0)\\",
+          \\"pageHeaderBg\\": \\"#0d1117\\",
           \\"marketingIcon\\": {
             \\"primary\\": \\"#79c0ff\\",
             \\"secondary\\": \\"#1f6feb\\"
@@ -2732,16 +2847,16 @@ module.exports = {
             \\"addition\\": {
               \\"numText\\": \\"#c9d1d9\\",
               \\"fg\\": \\"#c9d1d9\\",
-              \\"numBg\\": \\"rgba(66,160,255,0.3)\\",
-              \\"lineBg\\": \\"rgba(21,133,253,0.15)\\",
-              \\"wordBg\\": \\"rgba(21,133,253,0.4)\\"
+              \\"numBg\\": \\"rgba(88,166,255,0.3)\\",
+              \\"lineBg\\": \\"rgba(56,139,253,0.15)\\",
+              \\"wordBg\\": \\"rgba(56,139,253,0.4)\\"
             },
             \\"deletion\\": {
               \\"numText\\": \\"#c9d1d9\\",
               \\"fg\\": \\"#c9d1d9\\",
-              \\"numBg\\": \\"rgba(195,128,0,0.3)\\",
-              \\"lineBg\\": \\"rgba(195,128,0,0.15)\\",
-              \\"wordBg\\": \\"rgba(195,128,0,0.4)\\"
+              \\"numBg\\": \\"rgba(212,118,22,0.3)\\",
+              \\"lineBg\\": \\"rgba(212,118,22,0.15)\\",
+              \\"wordBg\\": \\"rgba(212,118,22,0.4)\\"
             },
             \\"hunk\\": {
               \\"numBg\\": \\"rgba(56,139,253,0.4)\\"
@@ -2753,7 +2868,7 @@ module.exports = {
           \\"diffstat\\": {
             \\"deletionBorder\\": \\"rgba(240,246,252,0.1)\\",
             \\"additionBorder\\": \\"rgba(240,246,252,0.1)\\",
-            \\"additionBg\\": \\"#42a0ff\\"
+            \\"additionBg\\": \\"#58a6ff\\"
           },
           \\"searchKeyword\\": {
             \\"hl\\": \\"rgba(210,153,34,0.4)\\"
@@ -2764,26 +2879,26 @@ module.exports = {
               \\"constant\\": \\"#79c0ff\\",
               \\"entity\\": \\"#d2a8ff\\",
               \\"storageModifierImport\\": \\"#c9d1d9\\",
-              \\"entityTag\\": \\"#83d4ff\\",
-              \\"keyword\\": \\"#d69a00\\",
+              \\"entityTag\\": \\"#a5d6ff\\",
+              \\"keyword\\": \\"#ec8e2c\\",
               \\"string\\": \\"#a5d6ff\\",
-              \\"variable\\": \\"#ffa657\\",
-              \\"brackethighlighterUnmatched\\": \\"#c38000\\",
+              \\"variable\\": \\"#fdac54\\",
+              \\"brackethighlighterUnmatched\\": \\"#d47616\\",
               \\"invalidIllegalText\\": \\"#f0f6fc\\",
-              \\"invalidIllegalBg\\": \\"#633e00\\",
+              \\"invalidIllegalBg\\": \\"#6c3906\\",
               \\"carriageReturnText\\": \\"#f0f6fc\\",
-              \\"carriageReturnBg\\": \\"#865401\\",
-              \\"stringRegexp\\": \\"#83d4ff\\",
+              \\"carriageReturnBg\\": \\"#914d04\\",
+              \\"stringRegexp\\": \\"#a5d6ff\\",
               \\"markupList\\": \\"#f2cc60\\",
               \\"markupHeading\\": \\"#1f6feb\\",
               \\"markupItalic\\": \\"#c9d1d9\\",
               \\"markupBold\\": \\"#c9d1d9\\",
-              \\"markupDeletedText\\": \\"#f0ec59\\",
-              \\"markupDeletedBg\\": \\"#452f00\\",
-              \\"markupInsertedText\\": \\"#a0e8ff\\",
-              \\"markupInsertedBg\\": \\"#0a2861\\",
-              \\"markupChangedText\\": \\"#ffdfb6\\",
-              \\"markupChangedBg\\": \\"#5a1e02\\",
+              \\"markupDeletedText\\": \\"#ffe2bb\\",
+              \\"markupDeletedBg\\": \\"#4e2906\\",
+              \\"markupInsertedText\\": \\"#cae8ff\\",
+              \\"markupInsertedBg\\": \\"#0c2d6b\\",
+              \\"markupChangedText\\": \\"#ffe2bb\\",
+              \\"markupChangedBg\\": \\"#4e2906\\",
               \\"markupIgnoredText\\": \\"#c9d1d9\\",
               \\"markupIgnoredBg\\": \\"#1158c7\\",
               \\"metaDiffRange\\": \\"#d2a8ff\\",
@@ -2808,11 +2923,11 @@ module.exports = {
               \\"comment\\": \\"#8b949e\\",
               \\"constant\\": \\"#79c0ff\\",
               \\"entity\\": \\"#d2a8ff\\",
-              \\"keyword\\": \\"#d69a00\\",
-              \\"storage\\": \\"#d69a00\\",
+              \\"keyword\\": \\"#ec8e2c\\",
+              \\"storage\\": \\"#ec8e2c\\",
               \\"string\\": \\"#a5d6ff\\",
               \\"support\\": \\"#79c0ff\\",
-              \\"variable\\": \\"#ffa657\\"
+              \\"variable\\": \\"#fdac54\\"
             }
           },
           \\"checks\\": {
@@ -2827,9 +2942,9 @@ module.exports = {
             \\"inputPlaceholderText\\": \\"#484f58\\",
             \\"inputFocusText\\": \\"#c9d1d9\\",
             \\"inputBg\\": \\"#161b22\\",
-            \\"donutError\\": \\"#c38000\\",
+            \\"donutError\\": \\"#d47616\\",
             \\"donutPending\\": \\"#d29922\\",
-            \\"donutSuccess\\": \\"#1585fd\\",
+            \\"donutSuccess\\": \\"#388bfd\\",
             \\"donutNeutral\\": \\"#8b949e\\",
             \\"dropdownText\\": \\"#c9d1d9\\",
             \\"dropdownBg\\": \\"#161b22\\",
@@ -2850,35 +2965,35 @@ module.exports = {
             \\"lineHoverBg\\": \\"rgba(110,118,129,0.1)\\",
             \\"lineSelectedBg\\": \\"rgba(56,139,253,0.15)\\",
             \\"lineSelectedNumText\\": \\"#58a6ff\\",
-            \\"lineDtFmText\\": \\"#f0f6fc\\",
+            \\"lineDtFmText\\": \\"#ffffff\\",
             \\"lineDtFmBg\\": \\"#9e6a03\\",
             \\"gateBg\\": \\"rgba(187,128,9,0.15)\\",
             \\"gateText\\": \\"#8b949e\\",
             \\"gateWaitingText\\": \\"#d29922\\",
             \\"stepHeaderOpenBg\\": \\"#161b22\\",
-            \\"stepErrorText\\": \\"#c38000\\",
+            \\"stepErrorText\\": \\"#d47616\\",
             \\"stepWarningText\\": \\"#d29922\\",
             \\"loglineText\\": \\"#8b949e\\",
             \\"loglineNumText\\": \\"#484f58\\",
             \\"loglineDebugText\\": \\"#a371f7\\",
             \\"loglineErrorText\\": \\"#8b949e\\",
             \\"loglineErrorNumText\\": \\"#484f58\\",
-            \\"loglineErrorBg\\": \\"rgba(195,128,0,0.15)\\",
+            \\"loglineErrorBg\\": \\"rgba(212,118,22,0.15)\\",
             \\"loglineWarningText\\": \\"#8b949e\\",
             \\"loglineWarningNumText\\": \\"#d29922\\",
             \\"loglineWarningBg\\": \\"rgba(187,128,9,0.15)\\",
             \\"loglineCommandText\\": \\"#58a6ff\\",
-            \\"loglineSectionText\\": \\"#42a0ff\\",
+            \\"loglineSectionText\\": \\"#58a6ff\\",
             \\"ansi\\": {
               \\"black\\": \\"#0d1117\\",
               \\"blackBright\\": \\"#161b22\\",
               \\"white\\": \\"#b1bac4\\",
               \\"whiteBright\\": \\"#b1bac4\\",
               \\"gray\\": \\"#6e7681\\",
-              \\"red\\": \\"#d69a00\\",
-              \\"redBright\\": \\"#e6b716\\",
-              \\"green\\": \\"#42a0ff\\",
-              \\"greenBright\\": \\"#66baff\\",
+              \\"red\\": \\"#ec8e2c\\",
+              \\"redBright\\": \\"#fdac54\\",
+              \\"green\\": \\"#58a6ff\\",
+              \\"greenBright\\": \\"#79c0ff\\",
               \\"yellow\\": \\"#d29922\\",
               \\"yellowBright\\": \\"#e3b341\\",
               \\"blue\\": \\"#58a6ff\\",
@@ -2901,7 +3016,7 @@ module.exports = {
             }
           },
           \\"avatar\\": {
-            \\"bg\\": \\"rgba(240,246,252,0.1)\\",
+            \\"bg\\": \\"rgba(255,255,255,0.1)\\",
             \\"border\\": \\"rgba(240,246,252,0.1)\\",
             \\"stackFade\\": \\"#30363d\\",
             \\"stackFadeMore\\": \\"#21262d\\"
@@ -2909,14 +3024,18 @@ module.exports = {
           \\"topicTag\\": {
             \\"border\\": \\"rgba(0,0,0,0)\\"
           },
+          \\"counter\\": {
+            \\"border\\": \\"rgba(0,0,0,0)\\"
+          },
           \\"selectMenu\\": {
             \\"backdropBorder\\": \\"#484f58\\",
             \\"tapHighlight\\": \\"rgba(48,54,61,0.5)\\",
             \\"tapFocusBg\\": \\"#0c2d6b\\"
           },
           \\"header\\": {
-            \\"text\\": \\"rgba(240,246,252,0.7)\\",
+            \\"text\\": \\"rgba(255,255,255,0.7)\\",
             \\"bg\\": \\"#161b22\\",
+            \\"divider\\": \\"#8b949e\\",
             \\"logo\\": \\"#f0f6fc\\"
           },
           \\"headerSearch\\": {
@@ -2939,12 +3058,12 @@ module.exports = {
             \\"black\\": \\"#484f58\\",
             \\"blackBright\\": \\"#6e7681\\",
             \\"white\\": \\"#b1bac4\\",
-            \\"whiteBright\\": \\"#f0f6fc\\",
+            \\"whiteBright\\": \\"#ffffff\\",
             \\"gray\\": \\"#6e7681\\",
-            \\"red\\": \\"#d69a00\\",
-            \\"redBright\\": \\"#e6b716\\",
-            \\"green\\": \\"#42a0ff\\",
-            \\"greenBright\\": \\"#66baff\\",
+            \\"red\\": \\"#ec8e2c\\",
+            \\"redBright\\": \\"#fdac54\\",
+            \\"green\\": \\"#58a6ff\\",
+            \\"greenBright\\": \\"#79c0ff\\",
             \\"yellow\\": \\"#d29922\\",
             \\"yellowBright\\": \\"#e3b341\\",
             \\"blue\\": \\"#58a6ff\\",
@@ -2968,26 +3087,26 @@ module.exports = {
             \\"counterBg\\": \\"#30363d\\",
             \\"primary\\": {
               \\"text\\": \\"#ffffff\\",
-              \\"bg\\": \\"#1d69e0\\",
+              \\"bg\\": \\"#1f6feb\\",
               \\"border\\": \\"rgba(240,246,252,0.1)\\",
-              \\"hoverBg\\": \\"#1585fd\\",
+              \\"hoverBg\\": \\"#388bfd\\",
               \\"hoverBorder\\": \\"rgba(240,246,252,0.1)\\",
-              \\"selectedBg\\": \\"#1d69e0\\",
-              \\"disabledText\\": \\"rgba(240,246,252,0.5)\\",
-              \\"disabledBg\\": \\"rgba(29,105,224,0.6)\\",
+              \\"selectedBg\\": \\"#1f6feb\\",
+              \\"disabledText\\": \\"rgba(255,255,255,0.5)\\",
+              \\"disabledBg\\": \\"rgba(31,111,235,0.6)\\",
               \\"disabledBorder\\": \\"rgba(240,246,252,0.1)\\",
-              \\"focusBg\\": \\"#1d69e0\\",
+              \\"focusBg\\": \\"#1f6feb\\",
               \\"focusBorder\\": \\"rgba(240,246,252,0.1)\\",
-              \\"icon\\": \\"#f0f6fc\\",
-              \\"counterBg\\": \\"rgba(240,246,252,0.2)\\"
+              \\"icon\\": \\"#ffffff\\",
+              \\"counterBg\\": \\"rgba(255,255,255,0.2)\\"
             },
             \\"outline\\": {
               \\"text\\": \\"#58a6ff\\",
               \\"hoverText\\": \\"#58a6ff\\",
               \\"hoverBg\\": \\"#30363d\\",
               \\"hoverBorder\\": \\"rgba(240,246,252,0.1)\\",
-              \\"hoverCounterBg\\": \\"rgba(240,246,252,0.2)\\",
-              \\"selectedText\\": \\"#f0f6fc\\",
+              \\"hoverCounterBg\\": \\"rgba(255,255,255,0.2)\\",
+              \\"selectedText\\": \\"#ffffff\\",
               \\"selectedBg\\": \\"#0d419d\\",
               \\"selectedBorder\\": \\"rgba(240,246,252,0.1)\\",
               \\"disabledText\\": \\"rgba(88,166,255,0.5)\\",
@@ -2997,21 +3116,21 @@ module.exports = {
               \\"counterBg\\": \\"rgba(31,111,235,0.1)\\"
             },
             \\"danger\\": {
-              \\"text\\": \\"#c38000\\",
-              \\"hoverText\\": \\"#f0f6fc\\",
-              \\"hoverBg\\": \\"#a66900\\",
-              \\"hoverBorder\\": \\"#c38000\\",
-              \\"hoverIcon\\": \\"#f0f6fc\\",
+              \\"text\\": \\"#d47616\\",
+              \\"hoverText\\": \\"#ffffff\\",
+              \\"hoverBg\\": \\"#b76100\\",
+              \\"hoverBorder\\": \\"#d47616\\",
+              \\"hoverIcon\\": \\"#ffffff\\",
               \\"hoverCounterBg\\": \\"rgba(255,255,255,0.2)\\",
               \\"selectedText\\": \\"#ffffff\\",
-              \\"selectedBg\\": \\"#865401\\",
-              \\"selectedBorder\\": \\"#d69a00\\",
-              \\"disabledText\\": \\"rgba(195,128,0,0.5)\\",
+              \\"selectedBg\\": \\"#914d04\\",
+              \\"selectedBorder\\": \\"#ec8e2c\\",
+              \\"disabledText\\": \\"rgba(212,118,22,0.5)\\",
               \\"disabledBg\\": \\"#0d1117\\",
-              \\"disabledCounterBg\\": \\"rgba(166,105,0,0.05)\\",
-              \\"focusBorder\\": \\"#c38000\\",
-              \\"counterBg\\": \\"rgba(166,105,0,0.1)\\",
-              \\"icon\\": \\"#c38000\\"
+              \\"disabledCounterBg\\": \\"rgba(183,97,0,0.05)\\",
+              \\"focusBorder\\": \\"#d47616\\",
+              \\"counterBg\\": \\"rgba(183,97,0,0.1)\\",
+              \\"icon\\": \\"#d47616\\"
             }
           },
           \\"underlinenav\\": {
@@ -3022,20 +3141,22 @@ module.exports = {
             \\"inlineDivider\\": \\"rgba(48,54,61,0.48)\\",
             \\"default\\": {
               \\"hoverBg\\": \\"rgba(177,186,196,0.12)\\",
+              \\"hoverBorder\\": \\"rgba(0,0,0,0)\\",
               \\"activeBg\\": \\"rgba(177,186,196,0.2)\\",
+              \\"activeBorder\\": \\"rgba(0,0,0,0)\\",
               \\"selectedBg\\": \\"rgba(177,186,196,0.08)\\"
             },
             \\"danger\\": {
-              \\"hoverBg\\": \\"rgba(195,128,0,0.16)\\",
-              \\"activeBg\\": \\"rgba(195,128,0,0.24)\\",
-              \\"hoverText\\": \\"#d69a00\\"
+              \\"hoverBg\\": \\"rgba(212,118,22,0.16)\\",
+              \\"activeBg\\": \\"rgba(212,118,22,0.24)\\",
+              \\"hoverText\\": \\"#ec8e2c\\"
             }
           },
           \\"fg\\": {
             \\"default\\": \\"#c9d1d9\\",
             \\"muted\\": \\"#8b949e\\",
             \\"subtle\\": \\"#484f58\\",
-            \\"onEmphasis\\": \\"#f0f6fc\\"
+            \\"onEmphasis\\": \\"#ffffff\\"
           },
           \\"canvas\\": {
             \\"default\\": \\"#0d1117\\",
@@ -3061,10 +3182,10 @@ module.exports = {
             \\"subtle\\": \\"rgba(56,139,253,0.15)\\"
           },
           \\"success\\": {
-            \\"fg\\": \\"#42a0ff\\",
-            \\"emphasis\\": \\"#1d69e0\\",
-            \\"muted\\": \\"rgba(21,133,253,0.4)\\",
-            \\"subtle\\": \\"rgba(21,133,253,0.15)\\"
+            \\"fg\\": \\"#58a6ff\\",
+            \\"emphasis\\": \\"#1f6feb\\",
+            \\"muted\\": \\"rgba(56,139,253,0.4)\\",
+            \\"subtle\\": \\"rgba(56,139,253,0.15)\\"
           },
           \\"attention\\": {
             \\"fg\\": \\"#d29922\\",
@@ -3073,16 +3194,28 @@ module.exports = {
             \\"subtle\\": \\"rgba(187,128,9,0.15)\\"
           },
           \\"severe\\": {
-            \\"fg\\": \\"#db6d28\\",
-            \\"emphasis\\": \\"#bd561d\\",
-            \\"muted\\": \\"rgba(219,109,40,0.4)\\",
-            \\"subtle\\": \\"rgba(219,109,40,0.15)\\"
+            \\"fg\\": \\"#d47616\\",
+            \\"emphasis\\": \\"#b76100\\",
+            \\"muted\\": \\"rgba(212,118,22,0.4)\\",
+            \\"subtle\\": \\"rgba(212,118,22,0.15)\\"
           },
           \\"danger\\": {
-            \\"fg\\": \\"#c38000\\",
-            \\"emphasis\\": \\"#a66900\\",
-            \\"muted\\": \\"rgba(195,128,0,0.4)\\",
-            \\"subtle\\": \\"rgba(195,128,0,0.15)\\"
+            \\"fg\\": \\"#d47616\\",
+            \\"emphasis\\": \\"#b76100\\",
+            \\"muted\\": \\"rgba(212,118,22,0.4)\\",
+            \\"subtle\\": \\"rgba(212,118,22,0.15)\\"
+          },
+          \\"open\\": {
+            \\"fg\\": \\"#ec8e2c\\",
+            \\"emphasis\\": \\"#b76100\\",
+            \\"muted\\": \\"rgba(212,118,22,0.4)\\",
+            \\"subtle\\": \\"rgba(212,118,22,0.15)\\"
+          },
+          \\"closed\\": {
+            \\"fg\\": \\"#8b949e\\",
+            \\"emphasis\\": \\"#6e7681\\",
+            \\"muted\\": \\"rgba(110,118,129,0.4)\\",
+            \\"subtle\\": \\"rgba(110,118,129,0.1)\\"
           },
           \\"done\\": {
             \\"fg\\": \\"#a371f7\\",
@@ -3106,7 +3239,7 @@ module.exports = {
             },
             \\"border\\": {
               \\"active\\": \\"#F78166\\",
-              \\"contrast\\": \\"rgba(240,246,252,0.2)\\"
+              \\"contrast\\": \\"rgba(255,255,255,0.2)\\"
             }
           }
         },
@@ -3144,7 +3277,7 @@ module.exports = {
             },
             \\"outline\\": {
               \\"hoverShadow\\": \\"0 1px 0 rgba(1,4,9,0.1)\\",
-              \\"hoverInsetShadow\\": \\"inset 0 1px 0 rgba(240,246,252,0.03)\\",
+              \\"hoverInsetShadow\\": \\"inset 0 1px 0 rgba(255,255,255,0.03)\\",
               \\"selectedShadow\\": \\"0 0 transparent\\",
               \\"focusShadow\\": \\"0 0 0 3px rgba(17,88,199,0.4)\\"
             },
@@ -3152,7 +3285,7 @@ module.exports = {
               \\"hoverShadow\\": \\"0 0 transparent\\",
               \\"hoverInsetShadow\\": \\"0 0 transparent\\",
               \\"selectedShadow\\": \\"0 0 transparent\\",
-              \\"focusShadow\\": \\"0 0 0 3px rgba(195,128,0,0.4)\\"
+              \\"focusShadow\\": \\"0 0 0 3px rgba(212,118,22,0.4)\\"
             }
           },
           \\"shadow\\": {
diff --git a/src/theme-preval.js b/src/theme-preval.js
index 12632717ea0..2f3ce2b7517 100644
--- a/src/theme-preval.js
+++ b/src/theme-preval.js
@@ -1,6 +1,6 @@
 // @preval
 // This file needs to be a JavaScript file using CommonJS to be compatible with preval
-// Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
+// Cache bust: 2022-03-14 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 
 const {default: primitives} = require('@primer/primitives')
 const {partitionColors, fontStack, omitScale} = require('./utils/theme')
diff --git a/src/theme.ts b/src/theme.ts
index cca8a16273d..4006d09ed79 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -62,6 +62,18 @@ type ThemeColors = {
     muted: string
     subtle: string
   }
+  open: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  closed: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
   done: {
     fg: string
     emphasis: string