getsentry · Jesse-Box · Jan 13, 2026 · Jan 8, 2026 · Jan 8, 2026 · Jan 8, 2026
@@ -86,7 +86,9 @@ const Label = styled('span')`
 const Bar = styled('div')<{active?: boolean}>`
   border-radius: 2px;
   background-color: ${p =>
-    p.active ? p.theme.colors.blue200 : p.theme.tokens.border.primary};
+    p.active
+      ? p.theme.tokens.background.transparent.accent.muted
+      : p.theme.tokens.border.primary};
   position: absolute;
   top: 0;
   left: 0;

@@ -275,7 +275,7 @@ function MiniBarChart({
   ...props
 }: Props) {
   const theme = useTheme();
-  const xAxisLineColor: string = theme.tokens.graphics.muted;
+  const xAxisLineColor: string = theme.tokens.border.transparent.neutral.muted;
 
   const updatedSeries: BarChartSeries[] = useMemo(() => {
     if (!series?.length) {
@@ -288,7 +288,11 @@ function MiniBarChart({
 
     const colorList = Array.isArray(colors)
       ? colors
-      : [theme.colors.gray400, theme.colors.blue400, theme.colors.blue400];
+      : [
+          theme.tokens.dataviz.semantic.neutral,
+          theme.tokens.dataviz.semantic.accent,
+          theme.tokens.dataviz.semantic.accent,
+        ];
 
     for (let i = 0; i < series.length; i++) {
       const original = series[i]!;
@@ -324,8 +328,8 @@ function MiniBarChart({
     emphasisColors,
     stacked,
     colors,
-    theme.colors.gray400,
-    theme.colors.blue400,
+    theme.tokens.dataviz.semantic.neutral,
+    theme.tokens.dataviz.semantic.accent,
   ]);
 
   const chartOptions = useMemo(() => {

@@ -251,7 +251,7 @@ class ReleaseSeries extends Component<ReleaseSeriesProps, State> {
     const markLine = MarkLine({
       animation: false,
       lineStyle: {
-        color: theme.colors.blue400,
+        color: theme.tokens.dataviz.semantic.release,
         opacity: 0.3,
         type: 'solid',
         ...lineStyle,
@@ -314,7 +314,7 @@ class ReleaseSeries extends Component<ReleaseSeriesProps, State> {
     return {
       id: 'release-lines',
       seriesName: 'Releases',
-      color: theme.colors.blue200,
+      color: theme.tokens.dataviz.semantic.release,
       data: [],
       markLine,
     };

diff --git a/static/app/components/checkInTimeline/timelineZoom.tsx b/static/app/components/checkInTimeline/timelineZoom.tsx
@@ -173,9 +173,9 @@ function useTimelineZoom<E extends HTMLElement>({enabled = true, onSelect}: Opti
 
 const Selection = styled(motion.div)`
   pointer-events: none;
-  background: ${p => p.theme.colors.gray200};
-  border-left: 1px solid ${p => p.theme.colors.blue200};
-  border-right: 1px solid ${p => p.theme.colors.blue200};
+  background: ${p => p.theme.tokens.background.transparent.neutral.muted};
+  border-left: 1px solid ${p => p.theme.tokens.border.transparent.accent.moderate};
+  border-right: 1px solid ${p => p.theme.tokens.border.transparent.accent.moderate};
   height: 100%;
   position: absolute;
   top: 0;

diff --git a/static/app/components/contentSliderDiff/index.tsx b/static/app/components/contentSliderDiff/index.tsx
@@ -206,7 +206,7 @@ const DragHandle = styled('div')`
   &:hover,
   &:active {
     &::after {
-      background: ${p => p.theme.colors.blue500};
+      background: ${p => p.theme.tokens.graphics.accent.vibrant};
     }
   }
 
@@ -219,7 +219,7 @@ const DragHandle = styled('div')`
   }
 
   &[data-resizing]::after {
-    background: ${p => p.theme.colors.blue500};
+    background: ${p => p.theme.tokens.graphics.accent.vibrant};
   }
 `;
 

@@ -68,32 +68,32 @@ function getAlertTokens(variant: AlertProps['variant'], theme: Theme) {
   switch (variant) {
     case 'info':
       return {
-        background: theme.colors.blue100,
-        iconBackground: theme.colors.chonk.blue400,
-        border: theme.tokens.border.accent,
+        background: theme.tokens.background.transparent.accent.muted,
+        iconBackground: theme.tokens.background.accent.vibrant,
+        border: theme.tokens.border.accent.moderate,
       };
     case 'danger':
       return {
-        background: theme.colors.red100,
-        iconBackground: theme.colors.chonk.red400,
-        border: theme.tokens.border.danger,
+        background: theme.tokens.background.transparent.danger.muted,
+        iconBackground: theme.tokens.background.danger.vibrant,
+        border: theme.tokens.border.danger.moderate,
       };
     case 'warning':
       return {
-        background: theme.colors.yellow100,
-        iconBackground: theme.colors.chonk.yellow400,
-        border: theme.tokens.border.warning,
+        background: theme.tokens.background.transparent.warning.muted,
+        iconBackground: theme.tokens.background.warning.vibrant,
+        border: theme.tokens.border.warning.moderate,
       };
     case 'success':
       return {
-        background: theme.colors.green100,
-        iconBackground: theme.colors.chonk.green400,
-        border: theme.tokens.border.success,
+        background: theme.tokens.background.transparent.success.muted,
+        iconBackground: theme.tokens.background.success.vibrant,
+        border: theme.tokens.border.success.moderate,
       };
     case 'muted':
       return {
-        background: theme.colors.surface500,
-        iconBackground: theme.colors.surface500,
+        background: theme.tokens.background.primary,
+        iconBackground: theme.tokens.background.primary,
         border: theme.tokens.border.primary,
       };
     default:

@@ -71,7 +71,7 @@ function makeBadgeTheme(p: BadgeProps, theme: Theme): React.CSSProperties {
     case 'info':
       return {
         color: theme.tokens.content.accent,
-        background: theme.colors.blue100,
+        background: theme.tokens.background.transparent.accent.muted,
       };
     case 'promotion':
       return {

@@ -83,17 +83,17 @@ function makeTagPillTheme(type: TagVariant, theme: Theme): React.CSSProperties {
     case 'info':
       return {
         color: theme.tokens.content.accent,
-        background: theme.colors.blue100,
+        background: theme.tokens.background.transparent.accent.muted,
       };
     case 'promotion':
       return {
         color: theme.tokens.content.promotion,
-        background: theme.colors.pink100,
+        background: theme.tokens.background.transparent.promotion.muted,
       };
     case 'danger':
       return {
         color: theme.tokens.content.danger,
-        background: theme.colors.red100,
+        background: theme.tokens.background.transparent.danger.muted,
       };
     case 'warning':
       return {
@@ -103,7 +103,7 @@ function makeTagPillTheme(type: TagVariant, theme: Theme): React.CSSProperties {
     case 'success':
       return {
         color: theme.tokens.content.success,
-        background: theme.colors.green100,
+        background: theme.tokens.background.transparent.success.muted,
       };
     default:
       unreachable(type);

@@ -1,5 +1,4 @@
 import type {DO_NOT_USE_ButtonProps as ButtonProps} from 'sentry/components/core/button/types';
-import {chonkFor} from 'sentry/components/core/chonk';
 // eslint-disable-next-line boundaries/element-types
 import {type SVGIconProps} from 'sentry/icons/svgIcon';
 // eslint-disable-next-line boundaries/element-types
@@ -269,33 +268,33 @@ function getButtonTheme(type: ButtonType, theme: Theme) {
   switch (type) {
     case 'default':
       return {
-        surface: theme.colors.surface500,
-        background: theme.colors.surface100,
-        color: theme.colors.gray800,
+        surface: theme.tokens.interactive.chonky.embossed.neutral.background,
+        background: theme.tokens.interactive.chonky.embossed.neutral.chonk,
+        color: theme.tokens.interactive.chonky.embossed.neutral.content.primary,
       };
     case 'accent':
       return {
-        surface: theme.colors.chonk.blue400,
-        background: chonkFor(theme, theme.colors.chonk.blue400),
-        color: theme.colors.white,
+        surface: theme.tokens.interactive.chonky.embossed.accent.background,
+        background: theme.tokens.interactive.chonky.embossed.accent.chonk,
+        color: theme.tokens.interactive.chonky.embossed.accent.content,
       };
     case 'warning':
       return {
-        surface: theme.colors.chonk.yellow400,
-        background: chonkFor(theme, theme.colors.chonk.yellow400),
-        color: theme.colors.black,
+        surface: theme.tokens.interactive.chonky.embossed.warning.background,
+        background: theme.tokens.interactive.chonky.embossed.warning.chonk,
+        color: theme.tokens.interactive.chonky.embossed.warning.content,
       };
     case 'danger':
       return {
-        surface: theme.colors.chonk.red400,
-        background: chonkFor(theme, theme.colors.chonk.red400),
-        color: theme.colors.white,
+        surface: theme.tokens.interactive.chonky.embossed.danger.background,
+        background: theme.tokens.interactive.chonky.embossed.danger.chonk,
+        color: theme.tokens.interactive.chonky.embossed.danger.content,
       };
     case 'transparent':
       return {
-        surface: 'transparent',
-        background: 'transparent',
-        color: theme.colors.gray800,
+        surface: theme.tokens.interactive.transparent.neutral.background.rest,
+        background: theme.tokens.interactive.transparent.neutral.background.rest,
+        color: theme.tokens.interactive.transparent.neutral.content.primary,
       };
     case 'link':
       return {

@@ -23,11 +23,13 @@ const NativeHiddenCheckbox = styled('input')`
   cursor: pointer;
 
   & + * {
-    color: ${p => p.theme.colors.white};
-    border: 1px solid ${p => p.theme.colors.surface100};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.rest};
+    color: ${p => p.theme.tokens.content.onVibrant.light};
+    border: 1px solid ${p => p.theme.tokens.border.primary};
 
     svg {
-      stroke: ${p => p.theme.colors.white};
+      stroke: ${p => p.theme.tokens.content.onVibrant.light};
     }
   }
 
@@ -37,22 +39,23 @@ const NativeHiddenCheckbox = styled('input')`
 
   &:disabled + *,
   &[aria-disabled='true'] + * {
-    background-color: ${p => p.theme.colors.surface500};
-    border: 1px solid ${p => p.theme.colors.surface100};
+    opacity: ${p => p.theme.tokens.interactive.disabled};
     cursor: not-allowed;
   }
 
   &:checked + *,
   &:indeterminate + * {
-    background-color: ${p => p.theme.colors.chonk.blue400};
-    color: ${p => p.theme.white};
+    background-color: ${p =>
+      p.theme.tokens.interactive.chonky.debossed.accent.background};
+    color: ${p => p.theme.tokens.content.onVibrant.light};
   }
 
   &:disabled:checked + *,
   &:disabled:indeterminate + * {
-    background-color: ${p => p.theme.colors.chonk.blue400};
-    border: 1px solid ${p => p.theme.colors.chonk.blue400};
-    opacity: 0.6;
+    background-color: ${p =>
+      p.theme.tokens.interactive.chonky.debossed.accent.background};
+    border: 1px solid ${p => p.theme.tokens.interactive.chonky.debossed.accent.chonk};
+    opacity: ${p => p.theme.tokens.interactive.disabled};
   }
 `;
 

@@ -1,28 +1,5 @@
-import color from 'color';
-
 import type {Theme} from 'sentry/utils/theme';
 
-const cache = new Map<{baseColor: string; type: 'light' | 'dark'}, string>();
-
-export function chonkFor(theme: Theme, baseColor: string) {
-  const cacheKey = {baseColor, type: theme.type};
-  if (cache.has(cacheKey)) {
-    return cache.get(cacheKey)!;
-  }
-  const input = color(baseColor).hsl();
-
-  const result =
-    theme.type === 'dark'
-      ? color.hsl(input.hue(), input.saturationl() * 0.1, input.lightness() * 0.1).hex()
-      : color
-          .hsl(input.hue(), input.saturationl() * 0.85, input.lightness() * 0.85)
-          .hex();
-
-  cache.set(cacheKey, result);
-
-  return result;
-}
-
 export function debossedBackground(theme: Theme) {
   return {
     backgroundColor: theme.type === 'dark' ? 'rgba(8,0,24,0.28)' : 'rgba(0,0,112,0.03)',

@@ -284,7 +284,7 @@ const Tab = styled('button')<{isSelected: boolean}>`
   color: var(--prism-comment);
   ${p =>
     p.isSelected
-      ? `border-bottom: 3px solid ${p.theme.colors.blue400};
+      ? `border-bottom: 3px solid ${p.theme.tokens.graphics.accent.vibrant};
       padding-bottom: 5px;
       color: var(--prism-base);`
       : ''}

@@ -26,7 +26,7 @@ const radioStyles = (props: RadioProps & {theme: Theme}): StrictCSSObject => ({
   width: radioConfig[props.size ?? 'md'].outerSize,
   height: radioConfig[props.size ?? 'md'].outerSize,
 
-  borderRadius: '50%',
+  borderRadius: props.theme.radius.full,
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -36,15 +36,15 @@ const radioStyles = (props: RadioProps & {theme: Theme}): StrictCSSObject => ({
 
   /* TODO(bootstrap): Our bootstrap CSS adds this, we can remove when we remove that */
   margin: '0 !important',
-  border: `1px solid ${props.theme.colors.surface100} !important`,
+  border: `1px solid ${props.theme.tokens.border.primary} !important`,
 
   '&:after': {
     content: '""',
     display: 'block',
     width: radioConfig[props.size ?? 'md'].innerSize,
     height: radioConfig[props.size ?? 'md'].innerSize,
-    borderRadius: '50%',
-    backgroundColor: props.theme.colors.white,
+    borderRadius: props.theme.radius.full,
+    backgroundColor: props.theme.tokens.content.onVibrant.light,
     transition: `all ${props.theme.motion.smooth.moderate}`,
     opacity: 0,
   },
@@ -54,8 +54,8 @@ const radioStyles = (props: RadioProps & {theme: Theme}): StrictCSSObject => ({
   },
 
   '&:checked': {
-    backgroundColor: props.theme.colors.chonk.blue400,
-    border: `1px solid ${props.theme.colors.chonk.blue400}`,
+    backgroundColor: props.theme.tokens.interactive.chonky.debossed.accent.background,
+    border: `1px solid ${props.theme.tokens.interactive.chonky.debossed.accent.chonk}`,
 
     '&:after': {
       animation: `${growIn} ${props.theme.motion.smooth.moderate}`,
@@ -64,7 +64,7 @@ const radioStyles = (props: RadioProps & {theme: Theme}): StrictCSSObject => ({
   },
 
   '&:disabled': {
-    opacity: 0.6,
+    opacity: props.theme.tokens.interactive.disabled,
     cursor: 'not-allowed',
   },
 });

@@ -41,7 +41,9 @@ function getTextColor({
   isDisabled?: boolean;
 }) {
   if (isSelected) {
-    return priority === 'default' ? theme.colors.blue500 : undefined;
+    return priority === 'default'
+      ? theme.tokens.interactive.chonky.embossed.neutral.content.accent
+      : undefined;
   }
 
   return theme.tokens.content.secondary;

@@ -167,7 +167,7 @@ const getStylesConfig = ({
       ...(state.isMulti && {
         maxHeight: 'inherit',
         overflowY: 'auto',
-        scrollbarColor: `${theme.colors.blue200} ${theme.tokens.background.primary}`,
+        scrollbarColor: `${theme.tokens.graphics.accent.moderate} ${theme.tokens.background.primary}`,
       }),
     }),
     input: provided => ({
@@ -323,8 +323,8 @@ export const CheckWrap = styled('div')<{
           margin-top: 2px;
           ${p.isSelected &&
           css`
-            background: ${p.theme.colors.blue400};
-            border-color: ${p.theme.colors.blue400};
+            background: ${p.theme.tokens.background.accent.vibrant};
+            border-color: ${p.theme.tokens.background.accent.vibrant};
           `}
         `
       : css`