theme: remove theme.white and theme.black

static/app/components/banner.tsx

@@ -101,7 +101,7 @@ const BannerWrapper = styled('div')<BannerWrapperProps>`
   box-shadow: ${p => p.theme.dropShadowMedium};
   border-radius: ${p => p.theme.radius.md};
   height: 180px;
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
 
   @media (min-width: ${p => p.theme.breakpoints.sm}) {
     height: 220px;
@@ -143,7 +143,7 @@ const CloseButton = styled(Button)`
   display: block;
   top: ${space(2)};
   right: ${space(2)};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   cursor: pointer;
   z-index: 1;
 `;

static/app/components/calendar/calendarStylesWrapper.tsx

@@ -36,7 +36,7 @@ const CalendarStylesWrapper = styled('div')`
   .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
   .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
   .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span {
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
   }
 
   .rdrDayDisabled {

static/app/components/charts/baseChart.tsx

@@ -814,7 +814,7 @@ const getTooltipStyles = (p: {theme: Theme}) => css`
 
   /* Tooltip description styling */
   .tooltip-description {
-    color: ${p.theme.white};
+    color: ${p.theme.colors.white};
     border-radius: ${p.theme.radius.md};
     background: #000;
     opacity: 0.9;

static/app/components/core/badge/alertBadge.tsx

@@ -119,7 +119,7 @@ const DiamondBackground = withChonk(
       width: 13px;
       height: 13px;
       transform: rotate(-45deg);
-      color: ${p => p.theme.white};
+      color: ${p => p.theme.colors.white};
     }
   `,
   ChonkAlertBadgeDiamondBackground

static/app/components/core/badge/badge.tsx

@@ -16,12 +16,12 @@ function makeBadgeTheme(
     case 'alpha':
       return {
         background: `linear-gradient(90deg, ${theme.colors.pink400}, ${theme.colors.yellow400})`,
-        color: theme.white,
+        color: theme.colors.white,
       };
     case 'beta':
       return {
         background: `linear-gradient(90deg, ${theme.colors.blue400}, ${theme.colors.pink400})`,
-        color: theme.white,
+        color: theme.colors.white,
       };
     // @TODO(jonasbadalic) default, experimental and internal all look the same and should be consolidated
     case 'default':
@@ -34,7 +34,7 @@ function makeBadgeTheme(
     case 'new':
       return {
         background: `linear-gradient(90deg, ${theme.colors.blue400}, ${theme.colors.green400})`,
-        color: theme.white,
+        color: theme.colors.white,
       };
     case 'warning':
       return {

static/app/components/core/checkbox/checkbox.chonk.tsx

@@ -34,7 +34,7 @@ export const ChonkNativeHiddenCheckbox = styled('input')`
   &:checked + *,
   &:indeterminate + * {
     background-color: ${p => p.theme.colors.chonk.blue400};
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
   }
 
   &:disabled:checked + *,

static/app/components/core/checkbox/checkbox.tsx

@@ -110,7 +110,7 @@ const NativeHiddenCheckbox = withChonk(
       border: 1px solid ${p => p.theme.border};
 
       svg {
-        stroke: ${p => p.theme.white};
+        stroke: ${p => p.theme.colors.white};
       }
     }
 
@@ -131,7 +131,7 @@ const NativeHiddenCheckbox = withChonk(
     &:checked + *,
     &:indeterminate + * {
       background-color: ${p => p.theme.active};
-      color: ${p => p.theme.white};
+      color: ${p => p.theme.colors.white};
     }
 
     &:disabled:checked + *,

static/app/components/core/segmentedControl/segmentedControl.tsx

@@ -316,7 +316,7 @@ function getTextColor({
     return priority === 'primary'
       ? isSelected
         ? css`
-            color: ${theme.white};
+            color: ${theme.colors.white};
           `
         : css`
             color: ${theme.subText};
@@ -329,7 +329,7 @@ function getTextColor({
   if (isSelected) {
     return priority === 'primary'
       ? css`
-          color: ${theme.white};
+          color: ${theme.colors.white};
         `
       : css`
           color: ${theme.tokens.content.primary};

static/app/components/core/select/option.tsx

@@ -67,9 +67,9 @@ export function SelectOption(props: Props) {
               <Fragment>
                 <CheckWrap isMultiple={isMultiple} isSelected={isSelected} size={size}>
                   {isSelected && (
-                    <IconCheckmark
+                    <StyledIconCheckmark
                       size={isMultiple ? 'xs' : 'sm'}
-                      color={isMultiple ? 'white' : undefined}
+                      isMultiple={isMultiple}
                     />
                   )}
                 </CheckWrap>
@@ -83,6 +83,10 @@ export function SelectOption(props: Props) {
   );
 }
 
+const StyledIconCheckmark = styled(IconCheckmark)<{isMultiple: boolean}>`
+  color: ${p => (p.isMultiple ? p.theme.colors.white : undefined)};
+`;
+
 const CheckWrap = withChonk(
   styled('div')<{
     isMultiple: boolean;

static/app/components/core/slider/slider.chonk.tsx

@@ -242,7 +242,7 @@ const SliderLabel = styled('span')`
   text-align: center;
   background: ${p => p.theme.colors.chonk.blue400};
   border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   border-radius: ${p => p.theme.radius['2xs']};
   z-index: ${p => p.theme.zIndex.tooltip};
 `;

static/app/components/events/attachmentViewers/logFileViewer.tsx

@@ -66,11 +66,11 @@ const SentryStyleAnsi = styled(Ansi)`
 
   .ansi-black-fg,
   .ansi-bright-black-fg {
-    color: ${p => p.theme.black};
+    color: ${p => p.theme.colors.black};
   }
   .ansi-white-fg,
   .ansi-bright-white-fg {
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
   }
 `;
 

static/app/components/events/autofix/autofixHighlightPopup.tsx

@@ -833,7 +833,7 @@ const CircularSeerIcon = styled('div')`
   > svg {
     width: 18px;
     height: 18px;
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
   }
 `;
 

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

@@ -144,7 +144,7 @@ const CloseDropdownMenu = styled(DropdownMenu)`
   display: block;
   top: ${space(1)};
   right: ${space(1)};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   cursor: pointer;
   z-index: 1;
 `;

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

@@ -49,7 +49,7 @@ const IconWrapper = styled('div')<Pick<Props, 'color'>>`
   width: 22px;
   height: 22px;
   border-radius: 50%;
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   background: ${p =>
     (p.theme[p.color as keyof typeof p.theme] as string | undefined) ?? p.color};
   box-shadow: ${p => p.theme.dropShadowLight};

static/app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx

@@ -80,7 +80,7 @@ const CloseBannerButton = styled(Button)`
   display: block;
   top: ${space(2)};
   right: ${space(2)};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   cursor: pointer;
   z-index: 1;
 `;

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

@@ -97,7 +97,7 @@ const Wrapper = styled('div')`
   }
 
   &.active.uncovered .line-number {
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
     mix-blend-mode: screen;
     background: ${p => p.theme.colors.red400};
   }

static/app/components/events/rrwebReplayer/baseRRWebReplayer.tsx

@@ -255,7 +255,7 @@ const BaseRRWebReplayer = styled(BaseRRWebReplayerComponent)`
   }
 
   .rr-controller__btns button.active {
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
     background: ${p => p.theme.active};
   }
 

static/app/components/events/viewHierarchy/node.tsx

@@ -58,7 +58,7 @@ const NodeTitle = styled('span')<{focused?: boolean}>`
   ${({focused, theme}) =>
     focused &&
     css`
-      color: ${theme.white};
+      color: ${theme.colors.white};
     `}
 `;
 

static/app/components/globalModal/index.tsx

@@ -276,7 +276,7 @@ const fullPageCss = css`
 const Backdrop = styled('div')`
   ${fullPageCss};
   z-index: ${p => p.theme.zIndex.modal};
-  background: ${p => p.theme.black};
+  background: ${p => p.theme.colors.black};
   will-change: opacity;
   transition: opacity 200ms;
   pointer-events: none;

static/app/components/group/tagFacets/tagFacetsDistributionMeter.tsx

@@ -310,12 +310,12 @@ const OtherSegment = styled('span')<{color: string}>`
 
 const Segment = styled('span', {shouldForwardProp: isPropValid})<{color: string}>`
   &:hover {
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
   }
   display: block;
   width: 100%;
   height: ${space(2)};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   outline: none;
   background-color: ${p => p.color};
   text-align: right;

static/app/components/guidedSteps/guidedSteps.tsx

@@ -270,7 +270,7 @@ const StepNumber = styled('div')<{isActive: boolean}>`
   border-radius: 50%;
   background: ${p =>
     p.isActive ? p.theme.tokens.graphics.accent : p.theme.tokens.graphics.muted};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   border: 4px solid ${p => p.theme.tokens.background.primary};
 `;
 

static/app/components/list/utils.tsx

@@ -41,7 +41,7 @@ const numericStyle = (
             font-weight: ${theme.fontWeight.normal};
             font-size: ${theme.fontSize.sm};
             background-color: ${theme.colors.chonk.yellow400};
-            color: ${theme.black};
+            color: ${theme.colors.black};
           `
         : css`
             top: 3px;

static/app/components/loading/loadingContainer.tsx

@@ -34,7 +34,7 @@ export default function LoadingContainer({
         <div>
           <LoadingMask
             isReloading={isReloading}
-            maskBackgroundColor={maskBackgroundColor ?? theme.white}
+            maskBackgroundColor={maskBackgroundColor ?? theme.colors.white}
           />
           <Indicator />
         </div>

static/app/components/menuItem.tsx

@@ -199,7 +199,7 @@ function getListItemStyles(props: MenuListItemProps & {theme: Theme}) {
   if (props.isActive) {
     return css`
       ${common}
-      color: ${props.theme.white};
+      color: ${props.theme.colors.white};
       background: ${props.theme.active};
 
       &:hover {

static/app/components/passwordStrength.tsx

@@ -102,5 +102,5 @@ const StrengthLabel = styled('div')`
 `;
 
 const ScoreText = styled('strong')`
-  color: ${p => p.theme.black};
+  color: ${p => p.theme.colors.black};
 `;

static/app/components/performance/waterfall/constants.tsx

@@ -29,7 +29,11 @@ export function getSpanBarColors(
         insetTextColor: theme.colors.gray400,
       };
     case SpanBarType.AFFECTED:
-      return {primary: '#f55459', alternate: '#faa9ac', insetTextColor: theme.white};
+      return {
+        primary: '#f55459',
+        alternate: '#faa9ac',
+        insetTextColor: theme.colors.white,
+      };
     case SpanBarType.AUTOGROUPED:
       return {
         primary: theme.colors.blue400,
@@ -40,9 +44,9 @@ export function getSpanBarColors(
       return {
         primary: '#f55459',
         alternate: '#faa9ac',
-        insetTextColor: theme.white,
+        insetTextColor: theme.colors.white,
       };
     default:
-      return {primary: '', alternate: '', insetTextColor: theme.white};
+      return {primary: '', alternate: '', insetTextColor: theme.colors.white};
   }
 }

static/app/components/profiling/flamegraph/callTreeTable.tsx

@@ -50,7 +50,7 @@ export const CallTreeTable = styled('div')`
       color: #fff;
 
       .${CallTreeTableClassNames.WEIGHT} {
-        color: ${p => p.theme.white};
+        color: ${p => p.theme.colors.white};
         opacity: 0.7;
       }
 
@@ -60,7 +60,7 @@ export const CallTreeTable = styled('div')`
       }
 
       .${CallTreeTableClassNames.FRAME_TYPE} {
-        color: ${p => p.theme.white};
+        color: ${p => p.theme.colors.white};
         opacity: 0.7;
       }
     }

static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx

@@ -209,7 +209,7 @@ const IconNode = styled('button')<{
   width: ${p => NODE_SIZES[p.frameCount - 1]}px;
   height: ${p => NODE_SIZES[p.frameCount - 1]}px;
   border-radius: 50%;
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   ${getBackgroundGradient}
   box-shadow: ${p => p.theme.dropShadowLight};
   user-select: none;

static/app/components/replays/player/bufferingOverlay.tsx

@@ -36,7 +36,7 @@ const Message = styled('div')`
   padding: ${space(3)};
   background: ${p => p.theme.colors.gray400};
   border-radius: ${p => p.theme.radius.md};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   z-index: ${p => p.theme.zIndex.initial};
 `;
 

static/app/components/replays/player/fastForwardBadge.tsx

@@ -32,7 +32,7 @@ const Badge = styled('div')`
 /* Badge layout and style */
 const FastForwardTooltip = styled(Tooltip)`
   background: ${p => p.theme.colors.gray400};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   padding: ${space(1.5)} ${space(2)};
   border-top-right-radius: ${p => p.theme.radius.md};
   z-index: ${p => p.theme.zIndex.initial};

static/app/components/replays/player/scrubber.tsx

@@ -206,7 +206,7 @@ export const PlayerScrubber = styled(Scrubber)`
     pointer-events: none;
     box-sizing: content-box;
     border-radius: var(--size);
-    border: solid ${p => p.theme.white};
+    border: solid ${p => p.theme.colors.white};
     border-width: var(--borderWidth);
     position: absolute;
     top: 0;

static/app/components/replays/virtualizedGrid/bodyCell.tsx

@@ -18,7 +18,7 @@ const cellBackground = (p: CellProps & {theme: Theme}) => {
 
 const cellColor = (p: CellProps & {theme: Theme}) => {
   if (p.isSelected) {
-    const color = p.theme.white;
+    const color = p.theme.colors.white;
     return `color: ${color};`;
   }
 

static/app/components/scoreBar.spec.tsx

@@ -34,7 +34,7 @@ describe('ScoreBar', () => {
         size={60}
         thickness={2}
         score={7}
-        palette={['white', 'red', 'red', 'pink', 'pink', 'purple', 'purple', 'black']}
+        palette={['red', 'red', 'pink', 'pink', 'purple', 'purple']}
       />
     );
   });

static/app/components/selectMembers/index.tsx

@@ -206,7 +206,7 @@ class SelectMembers extends Component<Props, State> {
             ...provided,
 
             svg: {
-              color: state.isSelected && state.theme.white,
+              color: state.isSelected && state.theme.colors.white,
             },
           }),
         }}