Devtools brand update

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

packages/e2e-tests/helpers/passport.ts

@@ -1,13 +1,11 @@
 import { Page } from "@playwright/test";
 
 export async function showPassport(page: Page) {
-  const passportTab = page.locator(".toolbar-panel-button.passport");
+  const passportTab = page.locator("button.toolbar-panel-button.passport");
   await passportTab.waitFor();
-  const classes = await passportTab.getAttribute("class");
-  if (!classes?.includes("active")) {
-    const passportButton = passportTab.locator("button");
-    await passportButton.isEnabled();
-    await passportButton.click();
+  const pressed = await passportTab.getAttribute("aria-pressed");
+  if (pressed !== "true") {
+    await passportTab.click();
   }
 }
 

packages/replay-next/components/console/ConsoleActionsRow.module.css

@@ -18,7 +18,7 @@
 }
 .MenuToggleButton:focus,
 .DeleteTerminalExpressionButton:focus {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }
 
 .MenuToggleButtonIcon,

packages/replay-next/components/console/ConsoleRoot.module.css

@@ -1,8 +1,8 @@
 .ConsoleRoot {
   flex: 1 1 auto;
   overflow: hidden;
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: var(--radius-lg, 0.625rem);
+  border-bottom-right-radius: var(--radius-lg, 0.625rem);
   background-color: var(--body-bgcolor);
   word-break: break-all;
   font-size: var(--font-size-regular);
@@ -28,6 +28,7 @@
   overflow: auto;
   height: 100%;
   border-top: 1px solid var(--theme-splitter-color);
+  background-color: var(--tab-bgcolor-alt-subtle);
 }
 
 .PanelResizeHandleContainer {
@@ -70,6 +71,7 @@
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--theme-splitter-color);
+  background-color: var(--body-bgcolor);
 }
 
 .ConsoleSearchRow {

packages/replay-next/components/console/ConsoleSearch.module.css

@@ -8,7 +8,7 @@
   overflow: hidden;
 }
 .ContainerFocused {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }
 
 .Icon {
@@ -61,7 +61,7 @@
   outline: none;
 }
 .ResultsIconButton:focus {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }
 .ResultsIconButton:hover:not(.ResultsIconButton:disabled):not(.ResultsIconButtonActive) {
   color: var(--color-default);

packages/replay-next/components/console/filters/EventsList.module.css

@@ -25,7 +25,7 @@
   font-size: var(--font-size-regular);
 }
 .FilterInput:focus {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }
 .FilterInput:disabled {
   opacity: 0.5;

packages/replay-next/components/console/filters/FilterText.module.css

@@ -10,5 +10,5 @@
   outline: none;
 }
 .Input:focus {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }

packages/replay-next/components/elements/ElementsListItem.module.css

@@ -22,7 +22,7 @@
   color: var(--color-default);
 }
 .Node[data-selected] {
-  background-color: var(--primary-accent-dimmed);
+  background-color: var(--theme-list-selection-background);
 }
 .Node[data-selected],
 .Node[data-selected] .HtmlAttributeName,
@@ -32,7 +32,8 @@
 .Node[data-selected] .HTMLTag,
 .Node[data-selected] .Separator,
 .Node[data-selected] .Icon {
-  fill: var(--theme-selection-color);
+  color: var(--body-color);
+  fill: var(--body-color);
 }
 .Node[data-loading] {
   opacity: 0.5;

packages/replay-next/components/elements/ElementsPanel.module.css

@@ -36,7 +36,7 @@
   border-radius: 0.25rem;
 }
 .SearchIconAndInput:focus-within {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }
 
 .AdvancedButton {

packages/replay-next/components/errors/SupportForm.module.css

@@ -19,8 +19,8 @@
 .TextArea:focus {
   box-shadow: none;
   outline-offset: 0;
-  outline: 1px solid var(--primary-accent);
-  border: 1px solid var(--primary-accent);
+  outline: 1px solid var(--focus-ring-input);
+  border: 1px solid var(--focus-ring-input);
 }
 .TextArea::placeholder {
   color: var(--color-dimmer);

packages/replay-next/components/search-files/SearchFiles.module.css

@@ -34,7 +34,7 @@
   border-radius: 0.5rem;
 }
 .InputWrapper:focus-within {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }
 .InputWrapper[data-error],
 .InputWrapper[data-error]:focus-within {
@@ -86,8 +86,8 @@
 }
 
 .SelectedSearchFilterButton {
-  background-color: var(--color-hit-counts-label-background-3);
-  border-color: var(--primary-accent);
+  background-color: var(--theme-base-100);
+  border-color: var(--focus-ring-input);
 }
 
 .SearchFilterIcon {

packages/replay-next/components/sources/SourceSearch.module.css

@@ -14,7 +14,7 @@
   display: flex;
 }
 .ContainerFocused {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }
 
 .InputAndResults {
@@ -82,7 +82,7 @@
   outline: none;
 }
 .ResultsIconButton:focus {
-  border-color: var(--primary-accent);
+  border-color: var(--focus-ring-input);
 }
 .ResultsIconButton:hover:not(.ResultsIconButton:disabled):not(.ResultsIconButtonActive) {
   color: var(--color-default);