fix(feedback): Improve CSS theme variable names and layout (#11964)

This updates the CSS theme, variable names and also how the css works.
The widget is better able to handle cases like:
- short desktop window (scrolls form)
- phone in portrait (full width if the screen is 600px or less)
- phone in landscape (scrolls form)
- when screenshots are in use, stick to screen edges

I also made it, I think, easier to position the button (aka trigger, aka
actor) around the screen. You can override in css `--page-margin: 16px`
to dictate the distance from the edge, and override `--inset: auto 0 0
auto;` to position the button in the different corners of the screen.
For example, you can put the trigger button on the edge of the screen
with something like:
```css
#sentry-feedback {
  --actor-inset: auto 0 calc(50% - var(--header-height)) auto;
}
```

Docs are updated in getsentry/sentry-docs#9961
to reflect the changed config/variable names too.

Some samples of different situations:
| Desc | Img |
| --- | --- |
| Normal |
![normal](https://github.com/getsentry/sentry-javascript/assets/187460/9223cf1f-9b4b-4bdc-b35a-65ccded71540)
| Short Window | ![short
window](https://github.com/getsentry/sentry-javascript/assets/187460/5749a07a-ccb6-4c3c-909e-712cf5172f11)
| Screenshot editor |
![screenshot](https://github.com/getsentry/sentry-javascript/assets/187460/3a3bbbd0-c982-4d23-b0cf-d6f96ad2a7d1)
| Mobile landscape | ![mobile
landscape](https://github.com/getsentry/sentry-javascript/assets/187460/aee7ca1f-c6a1-4555-9b07-0ff75aad93e2)
| Mobile portrait | ![mobile
portrait](https://github.com/getsentry/sentry-javascript/assets/187460/c7c08261-8343-4498-9084-5432c6f1c60e)
| Override Color | ![colors
override](https://github.com/getsentry/sentry-javascript/assets/187460/99d2ae92-58a0-49f0-982c-95b3e312a694)

Author: ryan953

packages/feedback/src/constants/theme.ts

@@ -1,57 +1,58 @@
-const LIGHT_BACKGROUND = '#ffffff';
 const INHERIT = 'inherit';
-const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
+const PURPLE = 'rgba(88, 74, 192, 1)';
+const PURPLE_HOVER = 'rgba(108, 95, 199, 1)';
 
 export const LIGHT_THEME = {
-  fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
-  fontSize: '14px',
-
   foreground: '#2b2233',
-  background: LIGHT_BACKGROUND,
-  success: '#268d75',
-  error: '#df3338',
-
-  zIndex: 100000,
+  successForeground: '#268d75',
+  errorForeground: '#df3338',
+  background: '#ffffff',
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
-  backgroundHover: '#f6f6f7',
-  borderRadius: '25px',
-
-  formBorderRadius: '20px',
-  formContentBorderRadius: '6px',
-
-  submitForeground: LIGHT_BACKGROUND,
-  submitBackground: 'rgba(88, 74, 192, 1)',
-  submitForegroundHover: LIGHT_BACKGROUND,
-  submitBackgroundHover: SUBMIT_COLOR,
-  submitBorder: SUBMIT_COLOR,
+  inputForeground: INHERIT,
+  inputBackground: INHERIT,
+  inputBackgroundHover: INHERIT,
+  inputBackgroundFocus: INHERIT,
+  inputBorder: 'var(--border)',
+  inputBorderRadius: '6px',
+  inputOutlineFocus: PURPLE_HOVER,
+
+  buttonForeground: INHERIT,
+  buttonForegroundHover: INHERIT,
+  buttonBackground: 'var(--background)',
+  buttonBackgroundHover: '#f6f6f7',
+  buttonBorder: 'var(--border)',
+  buttonOutlineFocus: 'var(--input-outline-focus)',
+
+  submitForeground: '#ffffff',
+  submitForegroundHover: '#ffffff',
+  submitBackground: PURPLE,
+  submitBackgroundHover: PURPLE_HOVER,
+  submitBorder: PURPLE_HOVER,
+  submitBorderRadius: 'var(--button-border-radius)',
   submitOutlineFocus: '#29232f',
 
-  cancelForeground: 'var(--foreground)',
-  cancelBackground: 'transparent',
-  cancelForegroundHover: 'var(--foreground)',
-  cancelBackgroundHover: 'var(--background-hover)',
-  cancelBorder: 'var(--border)',
-  cancelOutlineFocus: 'var(--input-outline-focus)',
+  triggerBackground: 'var(--background)',
+  triggerBackgroundHover: 'var(--button-background-hover)',
+  triggerBorderRadius: '1.7em/50%',
 
-  inputBackground: INHERIT,
-  inputForeground: INHERIT,
-  inputBorder: 'var(--border)',
-  inputOutlineFocus: SUBMIT_COLOR,
+  dialogBackground: 'var(--background)',
+  dialogBorderRadius: '20px',
 };
 
 export const DEFAULT_THEME = {
   light: LIGHT_THEME,
   dark: {
     ...LIGHT_THEME,
 
-    background: '#29232f',
-    backgroundHover: '#352f3b',
     foreground: '#ebe6ef',
-    border: '1.5px solid rgba(235, 230, 239, 0.15)',
+    successForeground: '#2da98c',
+    errorForeground: '#f55459',
+    background: '#29232f',
+    border: '1.5px solid rgba(235, 230, 239, 0.5)',
+    boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
-    success: '#2da98c',
-    error: '#f55459',
+    buttonBackgroundHover: '#352f3b',
   },
 };

packages/feedback/src/core/components/Actor.css.ts

@@ -9,7 +9,7 @@ export function createActorStyles(): HTMLStyleElement {
 .widget__actor {
   position: fixed;
   z-index: var(--z-index);
-  margin: 0;
+  margin: var(--page-margin);
   inset: var(--actor-inset);
 
   display: flex;
@@ -20,14 +20,15 @@ export function createActorStyles(): HTMLStyleElement {
   font-family: inherit;
   font-size: var(--font-size);
   font-weight: 600;
-  line-height: 16px;
+  line-height: 1.14em;
   text-decoration: none;
 
-  background-color: var(--background);
-  border-radius: var(--border-radius);
+  background-color: var(--trigger-background);
+  border-radius: var(--trigger-border-radius);
   border: var(--border);
   box-shadow: var(--box-shadow);
   color: var(--foreground);
+  fill: var(--foreground);
   cursor: pointer;
   opacity: 1;
   transition: transform 0.2s ease-in-out;
@@ -41,12 +42,12 @@ export function createActorStyles(): HTMLStyleElement {
 }
 
 .widget__actor:hover {
-  background-color: var(--background-hover);
+  background-color: var(--trigger-background-hover);
 }
 
 .widget__actor svg {
-  width: 16px;
-  height: 16px;
+  width: 1.14em;
+  height: 1.14em;
 }
 
 @media (max-width: 600px) {

packages/feedback/src/core/createMainStyles.ts

@@ -3,14 +3,23 @@ import { DOCUMENT } from '../constants';
 
 function getThemedCssVariables(theme: FeedbackInternalOptions['themeLight']): string {
   return `
-  --background: ${theme.background};
-  --background-hover: ${theme.backgroundHover};
   --foreground: ${theme.foreground};
-  --error: ${theme.error};
-  --success: ${theme.success};
+  --success-foreground: ${theme.successForeground};
+  --error-foreground: ${theme.errorForeground};
+  --background: ${theme.background};
   --border: ${theme.border};
-  --border-radius: ${theme.borderRadius};
   --box-shadow: ${theme.boxShadow};
+
+  --button-foreground: ${theme.buttonForeground};
+  --button-foreground-hover: ${theme.buttonForegroundHover};
+  --button-background: ${theme.buttonBackground};
+  --button-background-hover: ${theme.buttonBackgroundHover};
+  --button-border: ${theme.buttonBorder};
+  --button-outline-focus: ${theme.buttonOutlineFocus};
+
+  --trigger-background: ${theme.triggerBackground};
+  --trigger-background-hover: ${theme.triggerBackgroundHover};
+  --trigger-border-radius: ${theme.triggerBorderRadius};
   `;
 }
 
@@ -21,25 +30,16 @@ export function createMainStyles({ colorScheme, themeDark, themeLight }: Feedbac
   const style = DOCUMENT.createElement('style');
   style.textContent = `
 :host {
-  --z-index: ${themeLight.zIndex};
-  --font-family: ${themeLight.fontFamily};
-  --font-size: ${themeLight.fontSize};
-
-  font-family: var(--font-family);
-  font-size: var(--font-size);
+  --font-family: system-ui, 'Helvetica Neue', Arial, sans-serif;
+  --font-size: 14px;
+  --z-index: 100000;
 
   --page-margin: 16px;
-  --actor-inset: auto var(--page-margin) var(--page-margin) auto;
+  --inset: auto 0 0 auto;
+  --actor-inset: var(--inset);
 
-  .brand-link path {
-    fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
-  }
-  @media (prefers-color-scheme: dark)
-  {
-    path: {
-      fill: '#fff';
-    }
-  }
+  font-family: var(--font-family);
+  font-size: var(--font-size);
 
   ${getThemedCssVariables(colorScheme === 'dark' ? themeDark : themeLight)}
 }