feat(feedback): Simplify public css configuration for feedback (#11985)

getsentry · May 13, 2024 · 1d2602c · 1d2602c
1 parent 255bf96
commit 1d2602c
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 333 deletions.
diff --git a/packages/feedback/src/constants/index.ts b/packages/feedback/src/constants/index.ts
@@ -1,7 +1,5 @@
 import { GLOBAL_OBJ } from '@sentry/utils';
 
-export { DEFAULT_THEME } from './theme';
-
 // exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
 // prevents the browser package from being bundled in the CDN bundle, and avoids a
 // circular dependency between the browser and feedback packages
@@ -29,5 +27,3 @@ export const FEEDBACK_WIDGET_SOURCE = 'widget';
 export const FEEDBACK_API_SOURCE = 'api';
 
 export const SUCCESS_MESSAGE_TIMEOUT = 5000;
-
-export const CROP_COLOR = '#ffffff';
diff --git a/packages/feedback/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts
diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
@@ -23,12 +23,12 @@ export function createActorStyles(): HTMLStyleElement {
   line-height: 1.14em;
   text-decoration: none;
 
-  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);
+  background: var(--actor-background, var(--background));
+  border-radius: var(--actor-border-radius, 1.7em/50%);
+  border: var(--actor-border, var(--border));
+  box-shadow: var(--actor-box-shadow, var(--box-shadow));
+  color: var(--actor-color, var(--foreground));
+  fill: var(--actor-color, var(--foreground));
   cursor: pointer;
   opacity: 1;
   transition: transform 0.2s ease-in-out;
@@ -42,7 +42,8 @@ export function createActorStyles(): HTMLStyleElement {
 }
 
 .widget__actor:hover {
-  background-color: var(--trigger-background-hover);
+  background: var(--actor-hover-background, var(--background));
+  filter: var(--interactive-filter);
 }
 
 .widget__actor svg {

diff --git a/packages/feedback/src/core/createMainStyles.ts b/packages/feedback/src/core/createMainStyles.ts
@@ -1,25 +1,50 @@
 import type { FeedbackInternalOptions } from '@sentry/types';
 import { DOCUMENT } from '../constants';
 
-function getThemedCssVariables(theme: FeedbackInternalOptions['themeLight']): string {
+const PURPLE = 'rgba(88, 74, 192, 1)';
+
+interface InternalTheme extends NonNullable<FeedbackInternalOptions['themeLight']> {
+  border: string;
+  interactiveFilter: string;
+}
+
+const DEFAULT_LIGHT: InternalTheme = {
+  foreground: '#2b2233',
+  background: '#ffffff',
+  accentForeground: 'white',
+  accentBackground: PURPLE,
+  successColor: '#268d75',
+  errorColor: '#df3338',
+  border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+  outline: '1px auto var(--accent-background)',
+  interactiveFilter: 'brightness(95%)',
+};
+const DEFAULT_DARK: InternalTheme = {
+  foreground: '#ebe6ef',
+  background: '#29232f',
+  accentForeground: 'white',
+  accentBackground: PURPLE,
+  successColor: '#2da98c',
+  errorColor: '#f55459',
+  border: '1.5px solid rgba(41, 35, 47, 0.5)',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+  outline: '1px auto var(--accent-background)',
+  interactiveFilter: 'brightness(150%)',
+};
+
+function getThemedCssVariables(theme: InternalTheme): string {
   return `
   --foreground: ${theme.foreground};
-  --success-foreground: ${theme.successForeground};
-  --error-foreground: ${theme.errorForeground};
   --background: ${theme.background};
+  --accent-foreground: ${theme.accentForeground};
+  --accent-background: ${theme.accentBackground};
+  --success-color: ${theme.successColor};
+  --error-color: ${theme.errorColor};
   --border: ${theme.border};
   --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};
+  --outline: ${theme.outline};
+  --interactive-filter: ${theme.interactiveFilter};
   `;
 }
 
@@ -41,15 +66,17 @@ export function createMainStyles({ colorScheme, themeDark, themeLight }: Feedbac
   font-family: var(--font-family);
   font-size: var(--font-size);
 
-  ${getThemedCssVariables(colorScheme === 'dark' ? themeDark : themeLight)}
+  ${getThemedCssVariables(
+    colorScheme === 'dark' ? { ...DEFAULT_DARK, ...themeDark } : { ...DEFAULT_LIGHT, ...themeLight },
+  )}
 }
 
 ${
   colorScheme === 'system'
     ? `
 @media (prefers-color-scheme: dark) {
   :host {
-    ${getThemedCssVariables(themeDark)}
+    ${getThemedCssVariables({ ...DEFAULT_DARK, ...themeDark })}
   }
 }`
     : ''

diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
@@ -12,7 +12,6 @@ import {
   ADD_SCREENSHOT_LABEL,
   CANCEL_BUTTON_LABEL,
   CONFIRM_BUTTON_LABEL,
-  DEFAULT_THEME,
   DOCUMENT,
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
@@ -79,8 +78,8 @@ export const buildFeedbackIntegration = ({
 
     // FeedbackThemeConfiguration
     colorScheme = 'system',
-    themeLight,
-    themeDark,
+    themeLight = {},
+    themeDark = {},
 
     // FeedbackTextConfiguration
     addScreenshotButtonLabel = ADD_SCREENSHOT_LABEL,
@@ -118,14 +117,8 @@ export const buildFeedbackIntegration = ({
       useSentryUser,
 
       colorScheme,
-      themeDark: {
-        ...DEFAULT_THEME.dark,
-        ...themeDark,
-      },
-      themeLight: {
-        ...DEFAULT_THEME.light,
-        ...themeLight,
-      },
+      themeDark,
+      themeLight,
 
       triggerLabel,
       cancelButtonLabel,