button: add transparent button to legacy theme (#92025)

The current theme does not support a transparent button, however our UI
has many instances of such buttons, which has resulted in plenty of
styled decl that override this.
```tsx
styled(Button)`
	border: none;
	box-shadow: none;
`
```

This change allows us to remove the styled declarations while remaining
future compat with button variants.

Author: JonasBa

static/app/components/core/button/index.stories.tsx

@@ -15,7 +15,7 @@ export default storyBook('Button', (story, APIReference) => {
     const theme = useTheme();
     const variants = theme.isChonk
       ? ['default', 'transparent', 'primary', 'warning', 'danger', 'link']
-      : ['default', 'primary', 'link', 'danger'];
+      : ['default', 'transparent', 'primary', 'link', 'danger'];
 
     const propMatrix: PropMatrix<ButtonProps> = {
       children: ['Delete', undefined],

static/app/components/core/button/linkButton.stories.tsx

@@ -15,7 +15,7 @@ export default storyBook('LinkButton', (story, APIReference) => {
     const theme = useTheme();
     const variants = theme.isChonk
       ? ['default', 'transparent', 'primary', 'warning', 'danger', 'link']
-      : ['default', 'primary', 'link', 'danger'];
+      : ['default', 'transparent', 'primary', 'link', 'danger'];
 
     const propMatrix: PropMatrix<LinkButtonProps> = {
       children: ['Delete', undefined],

static/app/components/core/button/styles.chonk.tsx

@@ -23,8 +23,6 @@ function chonkPriorityToType(priority: ButtonProps['priority']): ChonkButtonType
     // forward it so that we can write the stories for it
     case 'warning':
       return 'warning';
-    // @ts-expect-error the previous button did not have this variant, but we still want to
-    // forward it so that we can write the stories for it
     case 'transparent':
       return 'transparent';
     case 'link':

static/app/components/core/button/types.tsx

@@ -38,7 +38,7 @@ export interface DO_NOT_USE_CommonButtonProps {
    * contextually the primary action, `danger` if the button will do something
    * destructive, `link` for visual similarity to a link.
    */
-  priority?: 'default' | 'primary' | 'danger' | 'link';
+  priority?: 'default' | 'primary' | 'danger' | 'link' | 'transparent';
   /**
    * The size of the button
    */

static/app/utils/theme/theme.tsx

@@ -577,6 +577,17 @@ export const generateButtonTheme = (colors: Colors, alias: Aliases): ButtonColor
     focusBorder: 'transparent',
     focusShadow: 'transparent',
   },
+  transparent: {
+    color: alias.textColor,
+    colorActive: alias.textColor,
+    background: 'transparent',
+    backgroundActive: 'transparent',
+    border: 'transparent',
+    borderActive: 'transparent',
+    borderTranslucent: 'transparent',
+    focusBorder: 'transparent',
+    focusShadow: 'transparent',
+  },
 });
 
 export const generateAlertTheme = (colors: Colors, alias: Aliases): AlertColors => ({
@@ -955,7 +966,7 @@ type Level = 'sample' | 'info' | 'warning' | 'error' | 'fatal' | 'default' | 'un
 type LevelColors = Record<Level, string>;
 
 // @TODO(jonasbadalic): Disabled is not a button variant, it's a state
-type Button = 'default' | 'primary' | 'danger' | 'link' | 'disabled';
+type Button = 'default' | 'primary' | 'danger' | 'link' | 'disabled' | 'transparent';
 type ButtonColors = Record<
   Button,
   {

static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx

@@ -706,7 +706,6 @@ function TabPinButton(props: {
       data-test-id="trace-drawer-tab-pin-button"
       size="zero"
       onClick={props.onClick}
-      // @ts-expect-error transparent is not supported in legacy button
       priority={theme.isChonk ? 'transparent' : 'default'}
       aria-label={props.pinned ? t('Unpin Tab') : t('Pin Tab')}
       icon={<StyledIconPin size="xs" isSolid={props.pinned} />}