ref(theme): Update drop shadow keys & values (#42890)

- **Change drop shadow names**: from `dropShadowLight` to
`dropShadowMedium` and from `dropShadowLightest` to `dropShadowLight`.
This makes the drop shadow options more balanced and intuitive.
Currently we have an odd set of names: `…Lightest`, `…Light`, and
`…Heavy`. Having a `…Medium` key helps suggest that it is the default
key that should be used in most cases.
- **Reduce (by half) the blur values** of `dropShadowLight` and
`dropShadowMedium`. This makes the shadows sharper and slightly more
prominent, since the pigment is condensed into a smaller area. The
visual effect is small but it does add up.

**Before:**
<img width="475" alt="Screenshot 2023-01-06 at 11 21 59 AM"
src="https://user-images.githubusercontent.com/44172267/211084380-2381b1ce-0241-4a2b-8f57-e260b2a6878a.png">


**After:**
<img width="475" alt="Screenshot 2023-01-06 at 11 21 46 AM"
src="https://user-images.githubusercontent.com/44172267/211084348-ae237f24-3a6d-4cc5-a7be-0c89be15d036.png">

static/app/components/banner.tsx

@@ -95,7 +95,7 @@ const BannerWrapper = styled('div')<BannerWrapperProps>`
   justify-content: center;
   position: relative;
   margin-bottom: ${space(2)};
-  box-shadow: ${p => p.theme.dropShadowLight};
+  box-shadow: ${p => p.theme.dropShadowMedium};
   border-radius: ${p => p.theme.borderRadius};
   height: 180px;
   color: ${p => p.theme.white};

static/app/components/button.tsx

@@ -288,9 +288,9 @@ const getBoxShadow = ({
   }
 
   return `
-      box-shadow: ${translucentBorderString} ${theme.dropShadowLight};
+      box-shadow: ${translucentBorderString} ${theme.dropShadowMedium};
       &:active {
-        box-shadow: ${translucentBorderString} inset ${theme.dropShadowLight};
+        box-shadow: ${translucentBorderString} inset ${theme.dropShadowMedium};
       }
     `;
 };

static/app/components/checkbox.tsx

@@ -105,7 +105,7 @@ const StyledCheckbox = styled('div')<{
   align-items: center;
   justify-content: center;
   color: inherit;
-  box-shadow: ${p => p.theme.dropShadowLight} inset;
+  box-shadow: ${p => p.theme.dropShadowMedium} inset;
   width: ${p => checkboxSizeMap[p.size].box};
   height: ${p => checkboxSizeMap[p.size].box};
   border-radius: ${p => checkboxSizeMap[p.size].borderRadius};

static/app/components/dropdownBubble.tsx

@@ -91,7 +91,7 @@ const DropdownBubble = styled(
   `
       : `
     top: calc(100% - 1px);
-    box-shadow: ${p.theme.dropShadowLight};
+    box-shadow: ${p.theme.dropShadowMedium};
   `};
 
   ${getMenuBorderRadius};

static/app/components/events/eventReplay/replayPreview.tsx

@@ -124,7 +124,7 @@ const BadgeContainer = styled('div')`
   background: ${p => p.theme.background};
   border-radius: 2.25rem;
   padding: ${space(0.75)} ${space(0.75)} ${space(0.75)} ${space(1)};
-  box-shadow: ${p => p.theme.dropShadowLightest};
+  box-shadow: ${p => p.theme.dropShadowLight};
   gap: 0 ${space(0.25)};
 `;
 

static/app/components/events/interfaces/breadcrumbs/breadcrumb/type/index.tsx

@@ -56,6 +56,6 @@ const IconWrapper = styled('div')<Pick<Props, 'color'>>`
   border-radius: 50%;
   color: ${p => p.theme.white};
   background: ${p => p.theme[p.color] ?? p.color};
-  box-shadow: ${p => p.theme.dropShadowLightest};
+  box-shadow: ${p => p.theme.dropShadowLight};
   position: relative;
 `;

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

@@ -252,7 +252,7 @@ const Frames = styled('ul')<{isHoverPreviewed?: boolean}>`
   background: ${p => p.theme.background};
   border-radius: ${p => p.theme.borderRadius};
   border: 1px ${p => 'solid ' + p.theme.border};
-  box-shadow: ${p => p.theme.dropShadowLight};
+  box-shadow: ${p => p.theme.dropShadowMedium};
   margin-bottom: ${space(2)};
   position: relative;
   display: grid;

static/app/components/events/interfaces/frame/openInContextLine.tsx

@@ -64,7 +64,7 @@ export const OpenInContainer = styled('div')<{columnQuantity: number}>`
   font-family: ${p => p.theme.text.family};
   border-bottom: 1px solid ${p => p.theme.border};
   padding: ${space(0.25)} ${space(3)};
-  box-shadow: ${p => p.theme.dropShadowLightest};
+  box-shadow: ${p => p.theme.dropShadowLight};
   text-indent: initial;
   overflow: auto;
   white-space: nowrap;

static/app/components/forms/controls/selectControl.tsx

@@ -204,7 +204,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
           color: theme.formText,
           background: theme.background,
           border: `1px solid ${theme.border}`,
-          boxShadow: theme.dropShadowLight,
+          boxShadow: theme.dropShadowMedium,
         },
         borderRadius: theme.borderRadius,
         transition: 'border 0.1s, box-shadow 0.1s',

static/app/components/forms/controls/selectOption.tsx

@@ -97,7 +97,7 @@ const CheckWrap = styled('div')<{isMultiple: boolean; isSelected: boolean}>`
       border: solid 1px ${p.theme.border};
       background: ${p.theme.backgroundElevated};
       border-radius: 2px;
-      box-shadow: inset ${p.theme.dropShadowLight};
+      box-shadow: inset ${p.theme.dropShadowMedium};
       ${
         p.isSelected &&
         `