theme: update proxy to handle JSON serialization (#106208)

If value is used outside of a string literal, then it escapes our proxy
and does not get coerced to the correct value

Author: JonasBa

static/app/utils/theme/compat.tsx

@@ -13,7 +13,12 @@ function createBackwardsCompatibleToken<
       if (prop === '__emotion_styles') {
         return target.vibrant;
       }
-      if (prop === 'toString' || prop === 'valueOf' || prop === Symbol.toPrimitive) {
+      if (
+        prop === 'toString' ||
+        prop === 'valueOf' ||
+        prop === 'toJSON' ||
+        prop === Symbol.toPrimitive
+      ) {
         return () => target.vibrant;
       }
       return Reflect.get(target, prop, receiver);

static/app/utils/theme/theme.spec.tsx

@@ -1,7 +1,7 @@
-import {useTheme} from '@emotion/react';
+import {css, useTheme} from '@emotion/react';
 import {expectTypeOf} from 'expect-type';
 
-import {renderHookWithProviders} from 'sentry-test/reactTestingLibrary';
+import {render, renderHookWithProviders, screen} from 'sentry-test/reactTestingLibrary';
 
 describe('theme', () => {
   describe('getColorPalette', () => {
@@ -26,4 +26,81 @@ describe('theme', () => {
       >();
     });
   });
+
+  describe('backwards compatibility tokens', () => {
+    it.each<['border' | 'graphics']>([['border'], ['graphics']])(
+      '%s should coerce to vibrant in template literals',
+      name => {
+        const theme = renderHookWithProviders(useTheme).result.current;
+        const token = theme.tokens[name].promotion;
+        expect(`color: ${token}`).toBe(`color: ${token.vibrant}`);
+      }
+    );
+
+    it.each<['border' | 'graphics']>([['border'], ['graphics']])(
+      '%s token should equal its vibrant value when coerced',
+      name => {
+        const theme = renderHookWithProviders(useTheme).result.current;
+        const token = theme.tokens[name].promotion;
+
+        // Test coercion to string equals vibrant value
+        expect(String(token)).toBe(token.vibrant);
+        expect(`${token}`).toBe(token.vibrant);
+      }
+    );
+
+    it('should work with Emotion css function for border tokens', () => {
+      const theme = renderHookWithProviders(useTheme).result.current;
+
+      expect(css`
+        border: 1px solid ${theme.tokens.border.promotion};
+      `).toMatchObject({
+        styles: expect.stringContaining(theme.tokens.border.promotion.vibrant),
+      });
+    });
+
+    it('should work with css template', () => {
+      const theme = renderHookWithProviders(useTheme).result.current;
+
+      expect(css`
+        background: ${theme.tokens.graphics.promotion};
+      `).toMatchObject({
+        styles: expect.stringContaining(theme.tokens.graphics.promotion.vibrant),
+      });
+    });
+
+    it('should work via object reference', () => {
+      const theme = renderHookWithProviders(useTheme).result.current;
+      const config = {iconBorder: theme.tokens.border.danger};
+
+      expect(css`
+        border-color: ${config.iconBorder};
+      `).toMatchObject({
+        styles: expect.stringContaining(theme.tokens.border.danger.vibrant),
+      });
+    });
+
+    it.each<['border' | 'graphics']>([['border'], ['graphics']])(
+      '%s token should serialize to vibrant value in JSON',
+      name => {
+        const theme = renderHookWithProviders(useTheme).result.current;
+        const token = theme.tokens[name].promotion;
+
+        const serialized = JSON.stringify({color: token});
+        const expected = JSON.stringify({color: token.vibrant});
+
+        expect(serialized).toBe(expected);
+      }
+    );
+  });
+
+  it('serializes style object to vibrant value in JSON', () => {
+    const theme = renderHookWithProviders(useTheme).result.current;
+
+    render(<div style={{borderColor: theme.tokens.border.promotion}}>Hello</div>);
+
+    expect(screen.getByText('Hello')).toHaveStyle({
+      borderColor: theme.tokens.border.promotion.vibrant,
+    });
+  });
 });