ref/scraps/removeChonkColors (#106166)

Removing the `chonk.*` group of tokens from the `lightColors` and
`darkColors` theme object

Author: Jesse-Box

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

@@ -37,33 +37,33 @@ function makeBadgeTheme(p: BadgeProps, theme: Theme): React.CSSProperties {
     // @TODO(jonasbadalic) these should use feature badge variants
     case 'alpha':
       return {
-        color: theme.colors.black,
-        background: theme.colors.chonk.pink400,
+        color: theme.tokens.content.onVibrant.dark,
+        background: theme.tokens.background.promotion.vibrant,
       };
     case 'beta':
       return {
-        color: theme.colors.black,
-        background: theme.colors.chonk.yellow400,
+        color: theme.tokens.content.onVibrant.dark,
+        background: theme.tokens.background.warning.vibrant,
       };
     case 'new':
       return {
-        color: theme.colors.black,
-        background: theme.colors.chonk.green400,
+        color: theme.tokens.content.onVibrant.dark,
+        background: theme.tokens.background.success.vibrant,
       };
     case 'experimental':
       return {
-        color: theme.colors.gray500,
-        background: theme.colors.gray100,
+        color: theme.tokens.content.secondary,
+        background: theme.tokens.background.transparent.neutral.muted,
       };
     case 'muted':
       return {
-        color: theme.colors.gray500,
-        background: theme.colors.gray100,
+        color: theme.tokens.content.secondary,
+        background: theme.tokens.background.transparent.neutral.muted,
       };
     case 'internal':
       return {
-        color: theme.colors.gray500,
-        background: theme.colors.gray100,
+        color: theme.tokens.content.secondary,
+        background: theme.tokens.background.transparent.neutral.muted,
       };
     // End feature badge variants
     // Highlight maps to info badge for now, but the highlight variant should be removed
@@ -76,22 +76,22 @@ function makeBadgeTheme(p: BadgeProps, theme: Theme): React.CSSProperties {
     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 {
         color: theme.tokens.content.warning,
-        background: theme.colors.yellow100,
+        background: theme.tokens.background.transparent.warning.muted,
       };
     case 'success':
       return {
         color: theme.tokens.content.success,
-        background: theme.colors.green100,
+        background: theme.tokens.background.transparent.success.muted,
       };
     default:
       unreachable(p.variant);

static/app/components/list/utils.tsx

@@ -40,8 +40,8 @@ const numericStyle = (
             height: 24px;
             font-weight: ${theme.fontWeight.normal};
             font-size: ${theme.fontSize.sm};
-            background-color: ${theme.colors.chonk.yellow400};
-            color: ${theme.black};
+            background-color: ${theme.tokens.background.warning.vibrant};
+            color: ${theme.tokens.content.onVibrant.dark};
           `
         : css`
             top: 3px;

static/app/views/alerts/rules/metric/details/sidebar.tsx

@@ -130,10 +130,10 @@ function TriggerDescription({
 
 function getColor(theme: Theme, type: 'critical' | 'warning' | 'success') {
   return type === 'critical'
-    ? theme.colors.chonk.red400
+    ? theme.tokens.background.danger.vibrant
     : type === 'warning'
-      ? theme.colors.chonk.yellow400
-      : theme.colors.chonk.green400;
+      ? theme.tokens.background.warning.vibrant
+      : theme.tokens.background.success.vibrant;
 }
 const StyledIconDiamond = styled(IconDiamond)<{type: 'critical' | 'warning' | 'success'}>`
   fill: ${p => getColor(p.theme, p.type)};

static/app/views/nav/sidebar.tsx

@@ -129,5 +129,5 @@ const SuperuserBadge = styled('div')`
   z-index: ${p => p.theme.zIndex.initial};
   left: 0;
   width: ${PRIMARY_SIDEBAR_WIDTH}px;
-  background: ${p => p.theme.colors.chonk.red400};
+  background: ${p => p.theme.tokens.background.danger.vibrant};
 `;

static/app/views/onboarding/components/stepHeading.tsx

@@ -33,9 +33,9 @@ const StepHeading = styled(
     justify-content: center;
     width: 30px;
     height: 30px;
-    background-color: ${p => p.theme.colors.chonk.yellow400};
+    background-color: ${p => p.theme.tokens.background.warning.vibrant};
     border-radius: 50%;
-    color: ${p => p.theme.colors.black};
+    color: ${p => p.theme.tokens.content.onVibrant.dark};
     font-size: 1rem;
   }
 `;

static/app/views/relocation/components/stepHeading.tsx

@@ -31,9 +31,9 @@ const StepHeading = styled((props: React.ComponentProps<typeof motion.h2>) => (
     justify-content: center;
     width: 30px;
     height: 30px;
-    background-color: ${p => p.theme.colors.chonk.yellow400};
+    background-color: ${p => p.theme.tokens.background.warning.vibrant};
     border-radius: 50%;
-    color: ${p => p.theme.colors.black};
+    color: ${p => p.theme.tokens.content.onVibrant.dark};
     font-size: 1rem;
   }
 `;

static/gsApp/components/superuser/superuserWarning.tsx

@@ -103,8 +103,8 @@ function SuperuserWarning({organization, className}: Props) {
 }
 
 const StyledBadge = styled(Badge)`
-  color: ${p => p.theme.white};
-  background: ${p => p.theme.colors.chonk.red400};
+  color: ${p => p.theme.tokens.content.onVibrant.light};
+  background: ${p => p.theme.tokens.background.danger.vibrant};
 `;
 
 const TooltipContent = styled('div')`