ref(theme): Update border radii (#41205)

Some updates to border radii:
* The default radius is now 6px
* New rule: if an element is in inside a larger container (`Panel`,
`Overlay`), it will have a smaller border radius of 4px. This creates a
more natural UI (larger objects usually have larger radii).
<img width="231" alt="Screen Shot 2022-11-09 at 3 38 29 PM"
src="https://user-images.githubusercontent.com/44172267/200965186-0216cb96-4042-4e3f-bdd0-7e4e028ae1bd.png">
* Some small fixes, mostly to prevent inner elements overflowing from
rounded corners.


**Before:**
<img width="599" alt="Screen Shot 2022-11-09 at 3 37 32 PM"
src="https://user-images.githubusercontent.com/44172267/200965081-6623e459-3154-40a6-9347-1a24cad2b9db.png">

**After:**
<img width="599" alt="Screen Shot 2022-11-09 at 3 37 14 PM"
src="https://user-images.githubusercontent.com/44172267/200965051-5ccba8d3-d195-49ad-b3fe-861ba502077c.png">

static/app/components/alert.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import {IconCheckmark, IconChevron, IconInfo, IconNot, IconWarning} from 'sentry/icons';
 import space from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
+import PanelProvider from 'sentry/utils/panelProvider';
 import {Theme} from 'sentry/utils/theme';
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -87,28 +88,30 @@ function Alert({
       {...hoverProps}
       {...props}
     >
-      {showIcon && <IconWrapper onClick={handleClick}>{icon ?? getIcon()}</IconWrapper>}
-      <Message>{children}</Message>
-      {showTrailingItems && (
-        <TrailingItems showIcon={showIcon} onClick={e => e.stopPropagation()}>
-          {trailingItems}
-        </TrailingItems>
-      )}
-      {showExpand && (
-        <ExpandIconWrap>
-          <IconChevron direction={isExpanded ? 'up' : 'down'} />
-        </ExpandIconWrap>
-      )}
-      {isExpanded && (
-        <ExpandContainer
-          ref={expandRef}
-          showIcon={showIcon}
-          showTrailingItems={showTrailingItems}
-          {...expandHoverProps}
-        >
-          {Array.isArray(expand) ? expand.map(item => item) : expand}
-        </ExpandContainer>
-      )}
+      <PanelProvider>
+        {showIcon && <IconWrapper onClick={handleClick}>{icon ?? getIcon()}</IconWrapper>}
+        <Message>{children}</Message>
+        {showTrailingItems && (
+          <TrailingItems showIcon={showIcon} onClick={e => e.stopPropagation()}>
+            {trailingItems}
+          </TrailingItems>
+        )}
+        {showExpand && (
+          <ExpandIconWrap>
+            <IconChevron direction={isExpanded ? 'up' : 'down'} />
+          </ExpandIconWrap>
+        )}
+        {isExpanded && (
+          <ExpandContainer
+            ref={expandRef}
+            showIcon={showIcon}
+            showTrailingItems={showTrailingItems}
+            {...expandHoverProps}
+          >
+            {Array.isArray(expand) ? expand.map(item => item) : expand}
+          </ExpandContainer>
+        )}
+      </PanelProvider>
     </Wrap>
   );
 }

static/app/components/button.tsx

@@ -369,7 +369,7 @@ const getSizeStyles = ({size = 'md', translucentBorder, theme}: StyledButtonProp
 export const getButtonStyles = ({theme, ...props}: StyledButtonProps) => {
   return css`
     display: inline-block;
-    border-radius: ${theme.button.borderRadius};
+    border-radius: ${theme.borderRadius};
     text-transform: none;
     font-weight: 600;
     ${getColors({...props, theme})};

static/app/components/card.tsx

@@ -1,6 +1,8 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import Panel from 'sentry/components/panels/panel';
+
 type Props = {
   /**
    * Adds hover and focus states to the card
@@ -25,11 +27,7 @@ const hoverStyle = css`
   }
 `;
 
-const Card = styled('div')<Props>`
-  position: relative;
-  background: ${p => p.theme.background};
-  border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
+const Card = styled(Panel)<Props>`
   display: flex;
   align-items: stretch;
   flex-direction: column;

static/app/components/dropdownAutoComplete/menu.tsx

@@ -418,6 +418,7 @@ export default Menu;
 const StyledInput = styled(Input)`
   flex: 1;
   border: 1px solid transparent;
+  border-radius: calc(${p => p.theme.panelBorderRadius} - 1px);
   &,
   &:focus,
   &:active,
@@ -472,7 +473,8 @@ const DropdownMainContent = styled('div')<{minWidth: number}>`
 const InputWrapper = styled('div')`
   display: flex;
   border-bottom: 1px solid ${p => p.theme.innerBorder};
-  border-radius: ${p => `${p.theme.borderRadius} ${p.theme.borderRadius} 0 0`};
+  border-radius: ${p =>
+    `calc(${p.theme.panelBorderRadius} - 1px) calc(${p.theme.panelBorderRadius} - 1px) 0 0`};
   align-items: center;
 `;
 

static/app/components/dropdownBubble.tsx

@@ -1,10 +1,13 @@
+import {forwardRef} from 'react';
+import isPropValid from '@emotion/is-prop-valid';
 import {css, Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import space from 'sentry/styles/space';
+import PanelProvider from 'sentry/utils/panelProvider';
 import SettingsHeader from 'sentry/views/settings/components/settingsHeader';
 
-type Params = {
+interface DropdownBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Menu alignment
    */
@@ -25,9 +28,7 @@ type Params = {
    * The width of the menu
    */
   width?: string;
-};
-
-type ParamsWithTheme = Params & {theme: Theme};
+}
 
 /**
  * If `blendCorner` is false, then we apply border-radius to all corners
@@ -41,8 +42,8 @@ const getMenuBorderRadius = ({
   alignMenu,
   width,
   theme,
-}: ParamsWithTheme) => {
-  const radius = theme.borderRadius;
+}: DropdownBubbleProps & {theme: Theme}) => {
+  const radius = theme.panelBorderRadius;
   if (!blendCorner || detached) {
     return css`
       border-radius: ${radius};
@@ -62,7 +63,16 @@ const getMenuBorderRadius = ({
   `;
 };
 
-const DropdownBubble = styled('div')<Params>`
+const DropdownBubble = styled(
+  forwardRef<HTMLDivElement, DropdownBubbleProps>(
+    ({children, ...props}, forwardedRef) => (
+      <div ref={forwardedRef} {...props}>
+        <PanelProvider>{children}</PanelProvider>
+      </div>
+    )
+  ),
+  {shouldForwardProp: prop => typeof prop === 'string' && isPropValid(prop)}
+)`
   background: ${p => p.theme.background};
   color: ${p => p.theme.textColor};
   border: 1px solid ${p => p.theme.border};

static/app/components/events/interfaces/crashContent/stackTrace/content.tsx

@@ -2,6 +2,7 @@ import {cloneElement, Component} from 'react';
 import styled from '@emotion/styled';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
+import Panel from 'sentry/components/panels/panel';
 import {t} from 'sentry/locale';
 import {Frame, Organization, PlatformType} from 'sentry/types';
 import {Event} from 'sentry/types/event';
@@ -272,8 +273,9 @@ class Content extends Component<Props, State> {
 
 export default withOrganization(Content);
 
-const Wrapper = styled('div')`
+const Wrapper = styled(Panel)`
   position: relative;
+  border-top-left-radius: 0;
 `;
 
 const StyledList = styled('ul')`

static/app/components/events/interfaces/crashContent/stackTrace/contentV2.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
+import Panel from 'sentry/components/panels/panel';
 import {t} from 'sentry/locale';
 import {Frame, Group, PlatformType} from 'sentry/types';
 import {Event} from 'sentry/types/event';
@@ -255,8 +256,9 @@ function Content({
 
 export default Content;
 
-const Wrapper = styled('div')`
+const Wrapper = styled(Panel)`
   position: relative;
+  border-top-left-radius: 0;
 `;
 
 const StyledList = styled(List)`

static/app/components/events/interfaces/crashContent/stackTrace/contentV3.tsx

@@ -1,6 +1,7 @@
 import {cloneElement, Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
+import Panel from 'sentry/components/panels/panel';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Frame, Group, PlatformType} from 'sentry/types';
@@ -239,12 +240,9 @@ function Content({
 
 export default Content;
 
-const Wrapper = styled('div')`
-  && {
-    border: 0;
-    box-shadow: none;
-    margin: 0;
-  }
+const Wrapper = styled(Panel)`
+  border-top-left-radius: 0;
+  position: relative;
 `;
 
 const Frames = styled('ul')<{isHoverPreviewed?: boolean}>`

static/app/components/links/styles.tsx

@@ -1,7 +1,7 @@
 import {Theme} from 'sentry/utils/theme';
 
 export const linkStyles = ({disabled, theme}: {theme: Theme; disabled?: boolean}) => `
-  border-radius: ${theme.borderRadius};
+  border-radius: ${theme.linkBorderRadius};
 
   &.focus-visible {
     box-shadow: ${theme.linkFocus} 0 0 0 2px;

static/app/components/overlay.tsx

@@ -6,6 +6,7 @@ import {HTMLMotionProps, motion, MotionProps, MotionStyle} from 'framer-motion';
 
 import OverlayArrow from 'sentry/components/overlayArrow';
 import {defined} from 'sentry/utils';
+import PanelProvider from 'sentry/utils/panelProvider';
 import testableTransition from 'sentry/utils/testableTransition';
 
 type OriginPoint = Partial<{x: number; y: number}>;
@@ -120,14 +121,14 @@ const Overlay = styled(
       return (
         <motion.div {...props} {...animationProps} ref={ref}>
           {defined(arrowProps) && <OverlayArrow {...arrowProps} />}
-          {children}
+          <PanelProvider>{children}</PanelProvider>
         </motion.div>
       );
     }
   )
 )`
   position: relative;
-  border-radius: ${p => p.theme.borderRadius};
+  border-radius: ${p => p.theme.panelBorderRadius};
   background: ${p => p.theme.backgroundElevated};
   box-shadow: 0 0 0 1px ${p => p.theme.translucentBorder}, ${p => p.theme.dropShadowHeavy};
   font-size: ${p => p.theme.fontSizeMedium};