diff --git a/static/app/components/banner.tsx b/static/app/components/banner.tsx
index 5b9e465e9482c2..d9d984d68672a1 100644
--- a/static/app/components/banner.tsx
+++ b/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;
 `;
diff --git a/static/app/components/calendar/calendarStylesWrapper.tsx b/static/app/components/calendar/calendarStylesWrapper.tsx
index 89998406ac9b6d..db71fd7b372321 100644
--- a/static/app/components/calendar/calendarStylesWrapper.tsx
+++ b/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 {
diff --git a/static/app/components/charts/baseChart.tsx b/static/app/components/charts/baseChart.tsx
index 9daee66e5d3e32..3844f2b406a115 100644
--- a/static/app/components/charts/baseChart.tsx
+++ b/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;
diff --git a/static/app/components/core/badge/alertBadge.tsx b/static/app/components/core/badge/alertBadge.tsx
index b5b8b84a2b921c..0bcf51a4726040 100644
--- a/static/app/components/core/badge/alertBadge.tsx
+++ b/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
diff --git a/static/app/components/core/badge/badge.tsx b/static/app/components/core/badge/badge.tsx
index 2793036290d6ee..b4edcea51c7ecf 100644
--- a/static/app/components/core/badge/badge.tsx
+++ b/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 {
diff --git a/static/app/components/core/checkbox/checkbox.chonk.tsx b/static/app/components/core/checkbox/checkbox.chonk.tsx
index ada5b4b39511bc..57935b64cd48a0 100644
--- a/static/app/components/core/checkbox/checkbox.chonk.tsx
+++ b/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 + *,
diff --git a/static/app/components/core/checkbox/checkbox.tsx b/static/app/components/core/checkbox/checkbox.tsx
index 71d7fab08caafd..62b31479127d85 100644
--- a/static/app/components/core/checkbox/checkbox.tsx
+++ b/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 + *,
diff --git a/static/app/components/core/segmentedControl/segmentedControl.tsx b/static/app/components/core/segmentedControl/segmentedControl.tsx
index edf52f38b55dd6..e4290c745ee80d 100644
--- a/static/app/components/core/segmentedControl/segmentedControl.tsx
+++ b/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};
diff --git a/static/app/components/core/select/option.tsx b/static/app/components/core/select/option.tsx
index 6909fc3a69047f..760c199ea43ed6 100644
--- a/static/app/components/core/select/option.tsx
+++ b/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;
diff --git a/static/app/components/core/slider/slider.chonk.tsx b/static/app/components/core/slider/slider.chonk.tsx
index a76e781dc20d85..39fe1fc957085f 100644
--- a/static/app/components/core/slider/slider.chonk.tsx
+++ b/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};
 `;
diff --git a/static/app/components/events/attachmentViewers/logFileViewer.tsx b/static/app/components/events/attachmentViewers/logFileViewer.tsx
index d2701cadcfac74..7278501e74a193 100644
--- a/static/app/components/events/attachmentViewers/logFileViewer.tsx
+++ b/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};
   }
 `;
 
diff --git a/static/app/components/events/autofix/autofixHighlightPopup.tsx b/static/app/components/events/autofix/autofixHighlightPopup.tsx
index 5624c48f4a6506..71e68dcb2ba346 100644
--- a/static/app/components/events/autofix/autofixHighlightPopup.tsx
+++ b/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};
   }
 `;
 
diff --git a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx b/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
index c5e83d8f0d26c3..da1e1b903e7a73 100644
--- a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
+++ b/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;
 `;
diff --git a/static/app/components/events/interfaces/breadcrumbs/breadcrumb/type/index.tsx b/static/app/components/events/interfaces/breadcrumbs/breadcrumb/type/index.tsx
index a10bb8578df028..d22580848f08c2 100644
--- a/static/app/components/events/interfaces/breadcrumbs/breadcrumb/type/index.tsx
+++ b/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};
diff --git a/static/app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx b/static/app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx
index 4594072dfcaff4..ba77992b6e033e 100644
--- a/static/app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx
+++ b/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;
 `;
diff --git a/static/app/components/events/interfaces/frame/contextLineNumber.tsx b/static/app/components/events/interfaces/frame/contextLineNumber.tsx
index 48f1b219a471b3..0b80454fe8b537 100644
--- a/static/app/components/events/interfaces/frame/contextLineNumber.tsx
+++ b/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};
   }
diff --git a/static/app/components/events/rrwebReplayer/baseRRWebReplayer.tsx b/static/app/components/events/rrwebReplayer/baseRRWebReplayer.tsx
index d1e2ce0a63d236..39267adf747ae3 100644
--- a/static/app/components/events/rrwebReplayer/baseRRWebReplayer.tsx
+++ b/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};
   }
 
diff --git a/static/app/components/events/viewHierarchy/node.tsx b/static/app/components/events/viewHierarchy/node.tsx
index acf871b3cb0dc6..7f1ca87ba72bd1 100644
--- a/static/app/components/events/viewHierarchy/node.tsx
+++ b/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};
     `}
 `;
 
diff --git a/static/app/components/globalModal/index.tsx b/static/app/components/globalModal/index.tsx
index 7f3c0d5e1a8276..d117eb533b87c1 100644
--- a/static/app/components/globalModal/index.tsx
+++ b/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;
diff --git a/static/app/components/group/tagFacets/tagFacetsDistributionMeter.tsx b/static/app/components/group/tagFacets/tagFacetsDistributionMeter.tsx
index 2bb2b744a28373..4b7c07e70579dc 100644
--- a/static/app/components/group/tagFacets/tagFacetsDistributionMeter.tsx
+++ b/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;
diff --git a/static/app/components/guidedSteps/guidedSteps.tsx b/static/app/components/guidedSteps/guidedSteps.tsx
index 033da7ea76d49f..96b6fe015caf04 100644
--- a/static/app/components/guidedSteps/guidedSteps.tsx
+++ b/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};
 `;
 
diff --git a/static/app/components/list/utils.tsx b/static/app/components/list/utils.tsx
index 395298a5fcaa6c..1db354d6c09c55 100644
--- a/static/app/components/list/utils.tsx
+++ b/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;
diff --git a/static/app/components/loading/loadingContainer.tsx b/static/app/components/loading/loadingContainer.tsx
index 083c7467c2dc9d..b3b2c6a3b3d591 100644
--- a/static/app/components/loading/loadingContainer.tsx
+++ b/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>
diff --git a/static/app/components/menuItem.tsx b/static/app/components/menuItem.tsx
index e75a9b2f6cc420..6a6c9da1e68ee9 100644
--- a/static/app/components/menuItem.tsx
+++ b/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 {
diff --git a/static/app/components/passwordStrength.tsx b/static/app/components/passwordStrength.tsx
index 7749dfb4397aa7..cb5aa962f0831c 100644
--- a/static/app/components/passwordStrength.tsx
+++ b/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};
 `;
diff --git a/static/app/components/performance/waterfall/constants.tsx b/static/app/components/performance/waterfall/constants.tsx
index 0c9bc2c4dc16cb..b3df98d4b76e22 100644
--- a/static/app/components/performance/waterfall/constants.tsx
+++ b/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};
   }
 }
diff --git a/static/app/components/profiling/flamegraph/callTreeTable.tsx b/static/app/components/profiling/flamegraph/callTreeTable.tsx
index 2fd4193d87e4d3..e847e2ee93a5a6 100644
--- a/static/app/components/profiling/flamegraph/callTreeTable.tsx
+++ b/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;
       }
     }
diff --git a/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx b/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx
index 3972ceb3d7ca5b..2cfe56bd7b7947 100644
--- a/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx
+++ b/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;
diff --git a/static/app/components/replays/player/bufferingOverlay.tsx b/static/app/components/replays/player/bufferingOverlay.tsx
index c8321d6ebd1588..6a36c6ed32172e 100644
--- a/static/app/components/replays/player/bufferingOverlay.tsx
+++ b/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};
 `;
 
diff --git a/static/app/components/replays/player/fastForwardBadge.tsx b/static/app/components/replays/player/fastForwardBadge.tsx
index 057c4f9076a7be..172fa4e786270f 100644
--- a/static/app/components/replays/player/fastForwardBadge.tsx
+++ b/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};
diff --git a/static/app/components/replays/player/scrubber.tsx b/static/app/components/replays/player/scrubber.tsx
index e864fbee818f5a..5de5a5bf9d58cc 100644
--- a/static/app/components/replays/player/scrubber.tsx
+++ b/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;
diff --git a/static/app/components/replays/virtualizedGrid/bodyCell.tsx b/static/app/components/replays/virtualizedGrid/bodyCell.tsx
index 03c81349552491..fc5065d46dc062 100644
--- a/static/app/components/replays/virtualizedGrid/bodyCell.tsx
+++ b/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};`;
   }
 
diff --git a/static/app/components/scoreBar.spec.tsx b/static/app/components/scoreBar.spec.tsx
index 94df6ef64a31e6..60d6736c372a31 100644
--- a/static/app/components/scoreBar.spec.tsx
+++ b/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']}
       />
     );
   });
diff --git a/static/app/components/selectMembers/index.tsx b/static/app/components/selectMembers/index.tsx
index 277c45df84a7ad..0fa9af240d3220 100644
--- a/static/app/components/selectMembers/index.tsx
+++ b/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,
             },
           }),
         }}
diff --git a/static/app/components/sentryAppComponentIcon.tsx b/static/app/components/sentryAppComponentIcon.tsx
index 4ecd0321d00e45..c6251051da845f 100644
--- a/static/app/components/sentryAppComponentIcon.tsx
+++ b/static/app/components/sentryAppComponentIcon.tsx
@@ -44,7 +44,7 @@ const SentryAppAvatarWrapper = styled('span')<{
   isDisabled?: boolean;
 }>`
   color: ${({isDark, isDisabled, theme}) =>
-    isDisabled ? theme.disabled : isDark ? 'white' : 'black'};
+    isDisabled ? theme.disabled : isDark ? theme.colors.white : theme.colors.black};
   filter: ${p => (p.isDark && !p.isDefault ? 'invert(1)' : 'invert(0)')};
   line-height: 0;
   flex-shrink: 0;
diff --git a/static/app/components/teamSelector.tsx b/static/app/components/teamSelector.tsx
index 1a1f4fae74e730..287ad980f2ccd2 100644
--- a/static/app/components/teamSelector.tsx
+++ b/static/app/components/teamSelector.tsx
@@ -69,7 +69,7 @@ const unassignedSelectStyles: StylesConfig = {
     // as the emotion theme object in react-select
     const theme = state.theme as unknown as Theme;
 
-    return {...provided, svg: {color: state.isSelected ? theme.white : undefined}};
+    return {...provided, svg: {color: state.isSelected ? theme.colors.white : undefined}};
   },
 };
 
diff --git a/static/app/components/workflowEngine/ui/conditionBadge.tsx b/static/app/components/workflowEngine/ui/conditionBadge.tsx
index 242434c0bc6430..dd9c44cd07d86f 100644
--- a/static/app/components/workflowEngine/ui/conditionBadge.tsx
+++ b/static/app/components/workflowEngine/ui/conditionBadge.tsx
@@ -7,7 +7,7 @@ export const ConditionBadge = styled('span')`
   background-color: ${p => p.theme.colors.blue400};
   padding: 0 ${space(0.75)};
   border-radius: ${p => p.theme.radius.md};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   text-transform: uppercase;
   text-align: center;
   font-size: ${p => p.theme.fontSize.md};
diff --git a/static/app/plugins/components/pluginIcon.tsx b/static/app/plugins/components/pluginIcon.tsx
index 2c817e69f6780c..6e91a0b1219fdd 100644
--- a/static/app/plugins/components/pluginIcon.tsx
+++ b/static/app/plugins/components/pluginIcon.tsx
@@ -98,7 +98,7 @@ const StyledPluginIconContainer = styled('div')<{
   height: ${p => p.size}px;
   width: ${p => p.size}px;
   min-width: ${p => p.size}px;
-  background-color: ${p => p.theme.white};
+  background-color: ${p => p.theme.colors.white};
   border-radius: 2px;
   display: flex;
   align-items: center;
diff --git a/static/app/utils/usePrismTokens.stories.tsx b/static/app/utils/usePrismTokens.stories.tsx
index ad2177b2b5e39d..3042825a1fd1d5 100644
--- a/static/app/utils/usePrismTokens.stories.tsx
+++ b/static/app/utils/usePrismTokens.stories.tsx
@@ -125,6 +125,6 @@ const Line = styled('div')`
 
 const LineNumber = styled('div')`
   background: ${p => p.theme.colors.blue500};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   padding: 0 ${space(1)};
 `;
diff --git a/static/app/views/alerts/rules/issue/details/sidebar.tsx b/static/app/views/alerts/rules/issue/details/sidebar.tsx
index a94ba3eb025d2b..671fc9ae0449da 100644
--- a/static/app/views/alerts/rules/issue/details/sidebar.tsx
+++ b/static/app/views/alerts/rules/issue/details/sidebar.tsx
@@ -218,7 +218,7 @@ const Badge = styled('span')`
   background-color: ${p => p.theme.colors.blue400};
   padding: 0 ${space(0.75)};
   border-radius: ${p => p.theme.radius.md};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   text-transform: uppercase;
   text-align: center;
   font-size: ${p => p.theme.fontSize.sm};
diff --git a/static/app/views/alerts/rules/issue/index.tsx b/static/app/views/alerts/rules/issue/index.tsx
index d533da204f6cda..6d5ae2a562a447 100644
--- a/static/app/views/alerts/rules/issue/index.tsx
+++ b/static/app/views/alerts/rules/issue/index.tsx
@@ -1673,7 +1673,7 @@ const Badge = styled('span')`
   background-color: ${p => p.theme.colors.blue400};
   padding: 0 ${space(0.75)};
   border-radius: ${p => p.theme.radius.md};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   text-transform: uppercase;
   text-align: center;
   font-size: ${p => p.theme.fontSize.md};
diff --git a/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx b/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx
index ad89c8b23e11bd..7c514d5f6720db 100644
--- a/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx
@@ -439,7 +439,7 @@ const fullPageCss = css`
 const Backdrop = styled('div')`
   ${fullPageCss};
   z-index: ${p => p.theme.zIndex.widgetBuilderDrawer};
-  background: ${p => p.theme.black};
+  background: ${p => p.theme.colors.black};
   will-change: opacity;
   transition: opacity 200ms;
   pointer-events: none;
diff --git a/static/app/views/issueDetails/actions/newIssueExperienceButton.tsx b/static/app/views/issueDetails/actions/newIssueExperienceButton.tsx
index b5dfc6b6e0d00a..b3a55e6ebe0845 100644
--- a/static/app/views/issueDetails/actions/newIssueExperienceButton.tsx
+++ b/static/app/views/issueDetails/actions/newIssueExperienceButton.tsx
@@ -277,11 +277,11 @@ const StyledDropdownButton = styled(DropdownButton)`
 
 const TryNewButton = styled(Button)`
   background: linear-gradient(90deg, #3468d8, #248574);
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   &:hover,
   &:active,
   &:focus {
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
   }
   ::after {
     background: linear-gradient(90deg, #3468d8, #248574);
diff --git a/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx b/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx
index 97ee6c3fbccb4d..b8196f335797f8 100644
--- a/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx
+++ b/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx
@@ -223,7 +223,7 @@ const IconNode = styled('div')`
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   box-shadow: ${p => p.theme.dropShadowLight};
   user-select: none;
   background-color: ${p => color(p.theme.colors.red200).alpha(0.3).string()};
diff --git a/static/app/views/nav/primary/components.tsx b/static/app/views/nav/primary/components.tsx
index 9943e3288abd8f..ea2be5ec9276eb 100644
--- a/static/app/views/nav/primary/components.tsx
+++ b/static/app/views/nav/primary/components.tsx
@@ -554,7 +554,7 @@ export const SidebarItemUnreadIndicator = styled('span')<{isMobile: boolean}>`
   transform: translate(-50%, -50%);
   display: block;
   text-align: center;
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   font-size: ${p => p.theme.fontSize.xs};
   background: ${p => p.theme.colors.blue500};
   width: 10px;
diff --git a/static/app/views/nav/secondary/secondary.tsx b/static/app/views/nav/secondary/secondary.tsx
index f5523a61483a3c..42253f5bd900fd 100644
--- a/static/app/views/nav/secondary/secondary.tsx
+++ b/static/app/views/nav/secondary/secondary.tsx
@@ -72,10 +72,10 @@ SecondaryNav.Header = function SecondaryNavHeader({children}: {children?: ReactN
           borderless={isCollapsed ? false : true}
           size="xs"
           icon={
-            <IconChevron
+            <StyledIconChevron
+              collapsed={isCollapsed}
               direction={isCollapsed ? 'right' : 'left'}
               isDouble
-              color={isCollapsed ? 'white' : undefined}
             />
           }
           aria-label={isCollapsed ? t('Expand') : t('Collapse')}
@@ -92,6 +92,10 @@ SecondaryNav.Header = function SecondaryNavHeader({children}: {children?: ReactN
   );
 };
 
+const StyledIconChevron = styled(IconChevron)<{collapsed: boolean}>`
+  color: ${p => (p.collapsed ? p.theme.colors.white : undefined)};
+`;
+
 SecondaryNav.Body = function SecondaryNavBody({children}: {children: ReactNode}) {
   const {layout} = useNavContext();
 
diff --git a/static/app/views/performance/newTraceDetails/trace.tsx b/static/app/views/performance/newTraceDetails/trace.tsx
index fbe413c1f8585d..98ebeeb8980811 100644
--- a/static/app/views/performance/newTraceDetails/trace.tsx
+++ b/static/app/views/performance/newTraceDetails/trace.tsx
@@ -1203,7 +1203,7 @@ const TraceStylingWrapper = styled('div')`
       svg {
         width: 12px;
         height: 12px;
-        fill: ${p => p.theme.white};
+        fill: ${p => p.theme.colors.white};
       }
 
       &.profile svg {
@@ -1318,11 +1318,11 @@ const TraceStylingWrapper = styled('div')`
 
       .TraceChildrenCountWrapper {
         button {
-          color: ${p => p.theme.white};
+          color: ${p => p.theme.colors.white};
           background-color: ${p => p.theme.colors.blue400};
         }
         svg {
-          fill: ${p => p.theme.white};
+          fill: ${p => p.theme.colors.white};
         }
       }
 
@@ -1331,7 +1331,7 @@ const TraceStylingWrapper = styled('div')`
 
         .TraceChildrenCountWrapper {
           button {
-            color: ${p => p.theme.white};
+            color: ${p => p.theme.colors.white};
             background-color: ${p => p.theme.colors.red400};
           }
         }
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issues.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issues.tsx
index b45b37d3219a35..274ff2b0cf06d3 100644
--- a/static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issues.tsx
+++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issues.tsx
@@ -108,7 +108,7 @@ const IconBackground = styled('div')`
   svg {
     width: 16px;
     height: 16px;
-    fill: ${p => p.theme.white};
+    fill: ${p => p.theme.colors.white};
   }
 `;
 
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
index 01876dd865678d..3780abdd39974c 100644
--- a/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
+++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
@@ -219,7 +219,7 @@ const IconBorder = styled('div')<{backgroundColor: string; errored?: boolean}>`
   min-width: 30px;
 
   svg {
-    fill: ${p => p.theme.white};
+    fill: ${p => p.theme.colors.white};
     width: 14px;
     height: 14px;
   }
diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/baseNode.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/baseNode.tsx
index 98834d1f95384e..35701590e2fb42 100644
--- a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/baseNode.tsx
+++ b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/baseNode.tsx
@@ -516,7 +516,7 @@ export abstract class BaseNode<T extends TraceTree.NodeValue = TraceTree.NodeVal
   }
 
   makeBarTextColor(inside: boolean, theme: Theme): string {
-    return inside ? 'white' : theme.subText;
+    return inside ? theme.colors.white : theme.subText;
   }
 
   /**
diff --git a/static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx b/static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx
index 1acf4dffc2c03e..865d3ab693576f 100644
--- a/static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx
+++ b/static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx
@@ -1662,7 +1662,7 @@ export class VirtualizedViewManager {
           return;
         }
 
-        text.ref.style.color = inside ? 'white' : '';
+        text.ref.style.color = inside ? this.theme.colors.white : '';
         text.ref.style.transform = `translateX(${text_transform}px)`;
       }
     }
diff --git a/static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx b/static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx
index 982f195e80b317..a09240ac879672 100644
--- a/static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx
+++ b/static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx
@@ -129,7 +129,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;
 `;
diff --git a/static/app/views/preprod/buildComparison/main/treemapDiffSection.tsx b/static/app/views/preprod/buildComparison/main/treemapDiffSection.tsx
index 32b0ff77f77901..1743b3bee09896 100644
--- a/static/app/views/preprod/buildComparison/main/treemapDiffSection.tsx
+++ b/static/app/views/preprod/buildComparison/main/treemapDiffSection.tsx
@@ -78,7 +78,7 @@ export function TreemapDiffSection({diffItems}: TreemapDiffSectionProps) {
       label: {
         fontSize: 12,
         fontWeight: 'bold',
-        color: theme.white,
+        color: theme.colors.white,
         fontFamily: 'Rubik',
         padding: 0,
         textShadowBlur: 2,
@@ -87,7 +87,7 @@ export function TreemapDiffSection({diffItems}: TreemapDiffSectionProps) {
       },
       upperLabel: {
         show: true,
-        color: theme.white,
+        color: theme.colors.white,
         backgroundColor: 'transparent',
         height: 24,
         fontSize: 12,
@@ -143,7 +143,7 @@ export function TreemapDiffSection({diffItems}: TreemapDiffSectionProps) {
             fontSize: 12,
             fontWeight: 'bold',
             fontFamily: 'Rubik',
-            color: theme.white,
+            color: theme.colors.white,
           },
         },
       },
diff --git a/static/app/views/preprod/components/appIcon.tsx b/static/app/views/preprod/components/appIcon.tsx
index 0c477d32879631..f1ffc6e8a38cff 100644
--- a/static/app/views/preprod/components/appIcon.tsx
+++ b/static/app/views/preprod/components/appIcon.tsx
@@ -49,7 +49,7 @@ const AppIconPlaceholder = styled('div')`
   justify-content: center;
   flex-shrink: 0;
   background: ${p => p.theme.purple400};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   font-weight: ${p => p.theme.fontWeight.bold};
   font-size: ${p => p.theme.fontSize.sm};
 `;
diff --git a/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx b/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
index 4827c5e705b652..1c5109ce78190c 100644
--- a/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
+++ b/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
@@ -148,7 +148,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
       label: {
         fontSize: 12,
         fontWeight: 'bold',
-        color: theme.white,
+        color: theme.colors.white,
         fontFamily: 'Rubik',
         padding: 0,
         textShadowBlur: 2,
@@ -157,7 +157,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
       },
       upperLabel: {
         show: true,
-        color: theme.white,
+        color: theme.colors.white,
         backgroundColor: 'transparent',
         height: 24,
         fontSize: 12,
@@ -239,7 +239,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
             fontSize: 12,
             fontWeight: 'bold',
             fontFamily: 'Rubik',
-            color: theme.white,
+            color: theme.colors.white,
           },
         },
       },
diff --git a/static/app/views/preprod/components/visualizations/treemapControlButtons.tsx b/static/app/views/preprod/components/visualizations/treemapControlButtons.tsx
index a0a250496c2d7a..7b228857d83afb 100644
--- a/static/app/views/preprod/components/visualizations/treemapControlButtons.tsx
+++ b/static/app/views/preprod/components/visualizations/treemapControlButtons.tsx
@@ -48,7 +48,7 @@ const TreemapControlButton = styled(Button)`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   height: 22px;
   min-height: 20px;
   max-height: 20px;
@@ -58,7 +58,7 @@ const TreemapControlButton = styled(Button)`
   box-shadow: ${p => p.theme.dropShadowMedium};
 
   &:hover {
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.colors.white};
     background: rgba(0, 0, 0, 0.9);
   }
 `;
diff --git a/static/app/views/prevent/preventAI/onboarding.tsx b/static/app/views/prevent/preventAI/onboarding.tsx
index 82b52bc19a1aee..2d43af6be3c5d3 100644
--- a/static/app/views/prevent/preventAI/onboarding.tsx
+++ b/static/app/views/prevent/preventAI/onboarding.tsx
@@ -252,7 +252,7 @@ const StepNumber = styled('div')`
   width: 24px;
   height: 24px;
   background-color: ${p => p.theme.colors.blue400};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   border-radius: 50%;
   font-size: ${p => p.theme.fontSize.md};
   font-weight: 600;
diff --git a/static/app/views/settings/components/identityIcon.tsx b/static/app/views/settings/components/identityIcon.tsx
index d9f6a43ce86379..c995fffc7f84bc 100644
--- a/static/app/views/settings/components/identityIcon.tsx
+++ b/static/app/views/settings/components/identityIcon.tsx
@@ -65,7 +65,7 @@ export function IdentityIcon({providerId, size = 36, ref}: IdentityIconProps) {
 const StyledIdentityIconContainer = styled('div')<{size: number}>`
   height: ${p => p.size}px;
   width: ${p => p.size}px;
-  background-color: ${p => p.theme.white};
+  background-color: ${p => p.theme.colors.white};
   border-radius: 2px;
   display: flex;
   align-items: center;
diff --git a/static/app/views/settings/organizationAuth/providerItem.tsx b/static/app/views/settings/organizationAuth/providerItem.tsx
index d3d206a51ab487..ea48da06aa9747 100644
--- a/static/app/views/settings/organizationAuth/providerItem.tsx
+++ b/static/app/views/settings/organizationAuth/providerItem.tsx
@@ -169,7 +169,7 @@ const FeatureBadge = styled('div')`
 
 const ActiveIndicator = styled('div')`
   background: ${p => p.theme.colors.green400};
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   padding: ${space(1)} ${space(1.5)};
   border-radius: 2px;
   font-size: 0.8em;
diff --git a/static/gsApp/components/superuser/superuserWarning.tsx b/static/gsApp/components/superuser/superuserWarning.tsx
index 88bce471b06050..d7c42610305a49 100644
--- a/static/gsApp/components/superuser/superuserWarning.tsx
+++ b/static/gsApp/components/superuser/superuserWarning.tsx
@@ -103,7 +103,7 @@ function SuperuserWarning({organization, className}: Props) {
 }
 
 const StyledBadge = styled(Badge)`
-  color: ${p => p.theme.white};
+  color: ${p => p.theme.colors.white};
   background: ${p => p.theme.colors.chonk.red400};
 `;
 
diff --git a/static/gsApp/views/amCheckout/components/checkoutSuccess.tsx b/static/gsApp/views/amCheckout/components/checkoutSuccess.tsx
index 7e7be31c2cd3e8..3fc4269666a1ca 100644
--- a/static/gsApp/views/amCheckout/components/checkoutSuccess.tsx
+++ b/static/gsApp/views/amCheckout/components/checkoutSuccess.tsx
@@ -664,7 +664,7 @@ const ReceiptSlot = styled('div')`
   border-radius: ${p => p.theme.radius.md};
   background: ${p => p.theme.gray200};
   box-shadow: 0px 2px 4px 0px
-    ${p => Color(p.theme.black).lighten(0.08).alpha(0.15).toString()} inset;
+    ${p => Color(p.theme.colors.black).lighten(0.08).alpha(0.15).toString()} inset;
 `;
 
 const ReceiptPaperContainer = styled('div')`
@@ -682,7 +682,7 @@ const ReceiptPaperShadow = styled('div')`
   width: 320px;
   height: 7px;
   box-shadow: inset 0 10px 6px -6px
-    ${p => Color(p.theme.black).lighten(0.05).alpha(0.15).toString()};
+    ${p => Color(p.theme.colors.black).lighten(0.05).alpha(0.15).toString()};
 `;
 
 const ReceiptPaper = styled(Container)`
diff --git a/static/gsApp/views/subscriptionPage/subscriptionUpsellBanner.tsx b/static/gsApp/views/subscriptionPage/subscriptionUpsellBanner.tsx
index ef4fa0a278cd07..f18fae85e9d5f9 100644
--- a/static/gsApp/views/subscriptionPage/subscriptionUpsellBanner.tsx
+++ b/static/gsApp/views/subscriptionPage/subscriptionUpsellBanner.tsx
@@ -216,7 +216,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;
 `;
diff --git a/static/gsApp/views/subscriptionPage/usageOverview/components/productTrialRibbon.tsx b/static/gsApp/views/subscriptionPage/usageOverview/components/productTrialRibbon.tsx
index 59477722312d3d..69a3528df49cc1 100644
--- a/static/gsApp/views/subscriptionPage/usageOverview/components/productTrialRibbon.tsx
+++ b/static/gsApp/views/subscriptionPage/usageOverview/components/productTrialRibbon.tsx
@@ -18,10 +18,6 @@ function ProductTrialRibbon({
   potentialProductTrial: ProductTrial | null;
 }) {
   const theme = useTheme();
-  const iconProps = {
-    size: 'xs' as const,
-    color: 'white' as const,
-  };
   const ribbonColor = activeProductTrial
     ? theme.tokens.graphics.promotion
     : theme.tokens.graphics.accent;
@@ -40,9 +36,9 @@ function ProductTrialRibbon({
       <RibbonBase ribbonColor={ribbonColor}>
         <Tooltip title={tooltipContent}>
           {activeProductTrial ? (
-            <IconClock {...iconProps} />
+            <StyledIconClock size="xs" />
           ) : (
-            <IconLightning {...iconProps} />
+            <StyledIconLightning size="xs" />
           )}
         </Tooltip>
       </RibbonBase>
@@ -56,6 +52,14 @@ function ProductTrialRibbon({
 
 export default ProductTrialRibbon;
 
+const StyledIconClock = styled(IconClock)`
+  color: ${p => p.theme.colors.white};
+`;
+
+const StyledIconLightning = styled(IconLightning)`
+  color: ${p => p.theme.colors.white};
+`;
+
 const RibbonContainer = styled('td')`
   display: flex;
   position: absolute;