nav: chonk compat for legacy nav (#89929)

Backwards compat for the legacy nav, so that we can decouple chonk
launch from the nav launch. Chonk uses a light navbar here, so the
colors need to be inverted (we were using a lot of white and black
colors)

Author: JonasBa

static/app/components/sidebar/index.tsx

@@ -665,18 +665,20 @@ const PrimaryItems = styled('div')`
   @media (max-height: 675px) and (min-width: ${p => p.theme.breakpoints.medium}) {
     border-bottom: 1px solid ${p => p.theme.sidebar.border};
     padding-bottom: ${space(1)};
-    box-shadow: rgba(0, 0, 0, 0.15) 0px -10px 10px inset;
+    box-shadow: ${p =>
+      p.theme.isChonk ? 'none' : 'rgba(0, 0, 0, 0.15) 0px -10px 10px inset'};
   }
   @media (max-width: ${p => p.theme.breakpoints.medium}) {
     overflow-y: hidden;
     overflow-x: auto;
     flex-direction: row;
     height: 100%;
     align-items: center;
-    border-right: 1px solid ${p => p.theme.sidebar.border};
     padding-right: ${space(1)};
     margin-right: ${space(0.5)};
-    box-shadow: rgba(0, 0, 0, 0.15) -10px 0px 10px inset;
+    border-right: none;
+    box-shadow: ${p =>
+      p.theme.isChonk ? 'none' : 'rgba(0, 0, 0, 0.15) -10px 0px 10px inset'};
     ::-webkit-scrollbar {
       display: none;
     }

static/app/components/sidebar/sidebarAccordion.tsx

@@ -19,6 +19,7 @@ import {ExpandedContext} from 'sentry/components/sidebar/expandedContextProvider
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useMedia from 'sentry/utils/useMedia';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -275,7 +276,7 @@ const SidebarAccordionExpandButton = styled(Button)<{sidebarCollapsed?: boolean}
   &:hover,
   a:hover &,
   a[active] & {
-    color: ${p => p.theme.white};
+    color: ${p => (isChonkTheme(p.theme) ? p.theme.colors.blue400 : p.theme.white)};
   }
 
   ${p => p.sidebarCollapsed && `display: none;`}

static/app/components/sidebar/sidebarDropdown/index.tsx

@@ -23,6 +23,7 @@ import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
+import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
@@ -213,8 +214,9 @@ const OrgOrUserName = styled(TextOverflow)`
   font-size: ${p => p.theme.fontSizeLarge};
   line-height: 1.2;
   font-weight: ${p => p.theme.fontWeightBold};
-  color: ${p => p.theme.white};
-  text-shadow: 0 0 6px rgba(255, 255, 255, 0);
+  color: ${p => (isChonkTheme(p.theme) ? p.theme.textColor : p.theme.white)};
+  text-shadow: ${p =>
+    isChonkTheme(p.theme) ? 'none' : '0 0 6px rgba(255, 255, 255, 0)'};
   transition: 0.15s text-shadow linear;
 `;
 
@@ -235,18 +237,19 @@ const SidebarDropdownActor = styled('button')`
 
   &:hover {
     ${OrgOrUserName} {
-      text-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
+      text-shadow: ${p =>
+        isChonkTheme(p.theme) ? 'none' : '0 0 6px rgba(255, 255, 255, 0.1)'};
     }
     ${UserNameOrEmail} {
-      color: ${p => p.theme.white};
+      color: ${p => (isChonkTheme(p.theme) ? p.theme.textColor : p.theme.white)};
     }
   }
 `;
 
 const AvatarStyles = (p: {collapsed: boolean; theme: Theme}) => css`
   margin: ${space(0.25)} 0;
   margin-right: ${p.collapsed ? '0' : space(1.5)};
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: ${isChonkTheme(p.theme) ? 'none' : '0 2px 0 rgba(0, 0, 0, 0.08)'};
   border-radius: 6px; /* Fixes background bleeding on corners */
 
   @media (max-width: ${p.theme.breakpoints.medium}) {

static/app/components/sidebar/sidebarDropdownMenu.styled.tsx

@@ -6,9 +6,11 @@ const SidebarDropdownMenu = (p: {theme: Theme}) => css`
   background: ${p.theme.background};
   color: ${p.theme.textColor};
   border-radius: 4px;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.08),
-    0 4px 20px 0 rgba(0, 0, 0, 0.3);
+  border: ${p.theme.isChonk ? `1px solid ${p.theme.border}` : 'none'};
+  border-bottom: ${p.theme.isChonk ? `2px solid ${p.theme.border}` : 'none'};
+  box-shadow: ${p.theme.isChonk
+    ? 'none'
+    : '0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 20px 0 rgba(0, 0, 0, 0.3)'};
   padding: 5px 0;
   width: 250px;
   z-index: 1000;

static/app/components/sidebar/sidebarItem.tsx

@@ -1,5 +1,5 @@
 import {Fragment, isValidElement, useCallback, useContext, useMemo} from 'react';
-import type {Theme} from '@emotion/react';
+import {type Theme, useTheme} from '@emotion/react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
@@ -16,6 +16,7 @@ import {space} from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import localStorage from 'sentry/utils/localStorage';
+import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
@@ -151,6 +152,7 @@ function SidebarItem({
   badgeTitle,
   ...props
 }: SidebarItemProps) {
+  const theme = useTheme();
   const {setExpandedItemId, shouldAccordionFloat} = useContext(ExpandedContext);
   const router = useRouter();
   // label might be wrapped in a guideAnchor
@@ -242,6 +244,7 @@ function SidebarItem({
       <SidebarNavigationItemHook id={id}>
         {({additionalContent}) => (
           <StyledSidebarItem
+            theme={theme}
             {...props}
             id={`sidebar-item-${id}`}
             isInFloatingAccordion={isInFloatingAccordion}
@@ -371,10 +374,10 @@ const getActiveStyle = ({
   theme,
   isInFloatingAccordion,
 }: {
+  theme: Theme;
   active?: string;
   hasNewNav?: boolean;
   isInFloatingAccordion?: boolean;
-  theme?: Theme;
 }) => {
   if (!active) {
     return '';
@@ -384,21 +387,23 @@ const getActiveStyle = ({
       &:active,
       &:focus,
       &:hover {
-        color: ${theme?.gray400};
+        color: ${isChonkTheme(theme) ? theme.subText : theme.gray400};
       }
     `;
   }
   return css`
-    color: ${theme?.white};
+    color: ${isChonkTheme(theme) ? theme.colors.blue400 : theme.white};
 
     &:active,
     &:focus,
     &:hover {
-      color: ${theme?.white};
+      color: ${isChonkTheme(theme) ? theme.colors.blue400 : theme.white};
     }
 
     &:before {
-      background-color: ${theme?.active};
+      background-color: ${!!theme && isChonkTheme(theme)
+        ? theme.colors.chonk.blue400
+        : theme.active};
     }
   `;
 };
@@ -407,12 +412,17 @@ const StyledSidebarItem = styled(Link, {
   shouldForwardProp: p =>
     !['isInFloatingAccordion', 'hasNewNav', 'index', 'organization'].includes(p),
 })`
+  color: ${p =>
+    isChonkTheme(p.theme)
+      ? p.theme.subText
+      : p.isInFloatingAccordion
+        ? p.theme.gray400
+        : 'inherit'};
+  height: ${p => (p.isInFloatingAccordion ? '35px' : p.hasNewNav ? '40px' : '30px')};
   display: flex;
-  color: ${p => (p.isInFloatingAccordion ? p.theme.gray400 : 'inherit')};
   position: relative;
   cursor: pointer;
   font-size: 15px;
-  height: ${p => (p.isInFloatingAccordion ? '35px' : p.hasNewNav ? '40px' : '30px')};
   flex-shrink: 0;
   border-radius: ${p => p.theme.borderRadius};
   transition: none;
@@ -458,11 +468,11 @@ const StyledSidebarItem = styled(Link, {
       if (p.isInFloatingAccordion) {
         return css`
           background-color: ${p.theme.hover};
-          color: ${p.theme.gray400};
+          color: ${isChonkTheme(p.theme) ? p.theme.subText : p.theme.gray400};
         `;
       }
       return css`
-        color: ${p.theme.white};
+        color: ${isChonkTheme(p.theme) ? p.theme.colors.chonk.blue400 : p.theme.white};
       `;
     }}
   }
@@ -483,10 +493,10 @@ const SidebarItemWrapper = styled('div')<{collapsed?: boolean; hasNewNav?: boole
   display: flex;
   align-items: center;
   justify-content: center;
-  ${p => p.hasNewNav && 'flex-direction: column;'}
   width: 100%;
-
+  ${p => p.hasNewNav && 'flex-direction: column;'}
   ${p => !p.collapsed && `padding-right: ${space(1)};`}
+
   @media (max-width: ${p => p.theme.breakpoints.medium}) {
     padding-right: 0;
   }
@@ -541,26 +551,27 @@ const getCollapsedBadgeStyle = ({collapsed, theme}: any) => {
   }
 
   return css`
+    background: ${theme.red300};
     text-indent: -99999em;
     position: absolute;
     right: 0;
     top: 1px;
-    background: ${theme.red300};
     width: 11px;
     height: 11px;
     border-radius: 11px;
     line-height: 11px;
-    box-shadow: 0 3px 3px #2f2936;
+    box-shadow: ${theme.isChonk ? 'none' : '0 3px 3px #2f2936'};
   `;
 };
 
 // @ts-expect-error TS(7031): Binding element '_' implicitly has an 'any' type.
 const SidebarItemBadge = styled(({collapsed: _, ...props}) => <span {...props} />)`
+  color: ${p => p.theme.white};
+  background: ${p =>
+    isChonkTheme(p.theme) ? p.theme.colors.chonk.red400 : p.theme.red300};
   display: block;
   text-align: center;
-  color: ${p => p.theme.white};
   font-size: 12px;
-  background: ${p => p.theme.red300};
   width: 22px;
   height: 22px;
   border-radius: 22px;
@@ -576,6 +587,6 @@ const CollapsedFeatureBadge = styled(FeatureBadge)`
 `;
 
 const StyledInteractionStateLayer = styled(InteractionStateLayer)`
-  height: ${16 * 2 + 40}px;
+  height: 72px;
   width: 70px;
 `;

static/app/utils/theme/theme.chonk.tsx

@@ -1072,7 +1072,7 @@ export const DO_NOT_USE_lightChonkTheme: ChonkTheme = {
     scrollbarThumbColor: '#A0A0A0',
     scrollbarColorTrack: 'rgba(45,26,50,92.42)', // end of the gradient which is used for background
     gradient: lightAliases.background,
-    border: 'transparent',
+    border: lightAliases.border,
     superuser: '#880808',
   },
 };
@@ -1142,11 +1142,11 @@ export const DO_NOT_USE_darkChonkTheme: ChonkTheme = {
   },
 
   sidebar: {
-    background: lightAliases.background,
+    background: darkAliases.background,
     scrollbarThumbColor: '#A0A0A0',
     scrollbarColorTrack: 'rgba(45,26,50,92.42)', // end of the gradient which is used for background
-    gradient: `none`,
-    border: 'transparent',
+    gradient: darkAliases.background,
+    border: darkAliases.border,
     superuser: '#880808',
   },
 };