@sentry-internal/feedback - npm Package Compare versions

Comparing version 0.0.1-alpha.6 to 0.0.1-alpha.7

build/npm/cjs/index.js

@@ -157,24 +157,45 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
+const LIGHT_BACKGROUND = '#ffffff';
+const INHERIT = 'inherit';
+const LIGHT_THEME = {
+  fontFamily: "'Helvetica Neue', Arial, sans-serif",
+  fontSize: '14px',
+
+  background: LIGHT_BACKGROUND,
+  backgroundHover: '#f6f6f7',
+  foreground: '#2b2233',
+  border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+
+  success: '#268d75',
+  error: '#df3338',
+
+  submitBackground: 'rgba(88, 74, 192, 1)',
+  submitBackgroundHover: 'rgba(108, 95, 199, 1)',
+  submitBorder: 'rgba(108, 95, 199, 1)',
+  submitForeground: LIGHT_BACKGROUND,
+
+  cancelBackground: 'transparent',
+  cancelBackgroundHover: 'var(--background-hover)',
+  cancelBorder: 'var(--border)',
+  cancelForeground: 'var(--foreground)',
+
+  inputBackground: INHERIT,
+  inputForeground: INHERIT,
+  inputBorder: 'var(--border)',
+  inputBorderFocus: 'rgba(108, 95, 199, 1)',
+};
+
 const DEFAULT_THEME = {
-  light: {
-    fontFamily: "'Helvetica Neue', Arial, sans-serif",
-    fontSize: '14px',
-    background: '#ffffff',
-    backgroundHover: '#f6f6f7',
-    foreground: '#2B2233',
-    success: '#268d75',
-    error: '#df3338',
-    border: '1.5px solid rgba(41, 35, 47, 0.13)',
-    boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
-  },
+  light: LIGHT_THEME,
   dark: {
-    fontFamily: "'Helvetica Neue', Arial, sans-serif",
-    fontSize: '14px',
+    ...LIGHT_THEME,
+
     background: '#29232f',
     backgroundHover: '#352f3b',
-    foreground: '#EBE6EF',
+    foreground: '#ebe6ef',
+    border: '1.5px solid rgba(235, 230, 239, 0.15)',
+
     success: '#2da98c',
     error: '#f55459',
-    border: '1.5px solid rgba(235, 230, 239, 0.15)',
-    boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
   },
@@ -196,2 +217,23 @@ };
 /**
+ * Quick and dirty deep merge for the Feedback integration options
+ */
+function mergeOptions(
+  defaultOptions,
+  optionOverrides,
+) {
+  return {
+    ...defaultOptions,
+    ...optionOverrides,
+    themeDark: {
+      ...defaultOptions.themeDark,
+      ...optionOverrides.themeDark,
+    },
+    themeLight: {
+      ...defaultOptions.themeLight,
+      ...optionOverrides.themeLight,
+    },
+  };
+}
+
+/**
  * Creates <style> element for widget actor (button that opens the dialog)
@@ -217,4 +259,4 @@ */
 
-  color: var(--fg-color);
-  background-color: var(--bg-color);
+  color: var(--foreground);
+  background-color: var(--background);
   border: var(--border);
@@ -227,3 +269,3 @@ box-shadow: var(--box-shadow);
 .widget__actor:hover {
-  background-color: var(--bg-hover-color);
+  background-color: var(--background-hover);
 }
@@ -246,3 +288,3 @@
 .feedback-icon path {
-  fill: var(--fg-color);
+  fill: var(--foreground);
 }
@@ -296,4 +338,4 @@ `;
   border-radius: 20px;
-  background-color: var(--bg-color);
-  color: var(--fg-color);
+  background-color: var(--background);
+  color: var(--foreground);
 
@@ -321,3 +363,3 @@ width: 320px;
 .error {
-  color: var(--error-color);
+  color: var(--error);
   margin-bottom: 16px;
@@ -335,3 +377,3 @@ }
 .form__error-container {
-  color: var(--error-color);
+  color: var(--error);
 }
@@ -365,5 +407,7 @@
   line-height: inherit;
+  background-color: var(--input-background);
   box-sizing: border-box;
-  border: var(--border);
+  border: var(--input-border);
   border-radius: 6px;
+  color: var(--input-foreground);
   font-size: 14px;
@@ -374,3 +418,3 @@ font-weight: 500;
 .form__input:focus {
-  border-color: rgba(108, 95, 199, 1);
+  border-color: var(--input-border-focus);
 }
@@ -391,3 +435,3 @@
   line-height: inherit;
-  border: var(--border);
+  border: var(--cancel-border);
   border-radius: 6px;
@@ -405,21 +449,21 @@ cursor: pointer;
 .btn--primary {
-  background-color: rgba(108, 95, 199, 1);
-  border-color: rgba(108, 95, 199, 1);
-  color: #fff;
+  background-color: var(--submit-background);
+  border-color: var(--submit-border);
+  color: var(--submit-foreground);
 }
 .btn--primary:hover {
-  background-color: rgba(88, 74, 192, 1);
+  background-color: var(--submit-background-hover);
 }
 
 .btn--default {
-  background-color: transparent;
-  color: var(--fg-color);
+  background-color: var(--cancel-background);
+  color: var(--cancel-foreground);
   font-weight: 500;
 }
 .btn--default:hover {
-  background-color: var(--bg-accent-color);
+  background-color: var(--cancel-background-hover);
 }
 
 .success-message {
-  background-color: var(--bg-color);
+  background-color: var(--background);
   border: var(--border);
@@ -429,3 +473,3 @@ border-radius: 12px;
   font-weight: 600;
-  color: var(--success-color);
+  color: var(--success);
   padding: 12px 24px;
@@ -441,3 +485,3 @@ line-height: 25px;
 .success-icon path {
-  fill: var(--success-color);
+  fill: var(--success);
 }
@@ -449,2 +493,29 @@ `;
 
+function getThemedCssVariables(theme) {
+  return `
+  --background: ${theme.background};
+  --background-hover: ${theme.backgroundHover};
+  --foreground: ${theme.foreground};
+  --error: ${theme.error};
+  --success: ${theme.success};
+  --border: ${theme.border};
+  --box-shadow: ${theme.boxShadow};
+
+  --submit-background: ${theme.submitBackground};
+  --submit-background-hover: ${theme.submitBackgroundHover};
+  --submit-border: ${theme.submitBorder};
+  --submit-foreground: ${theme.submitForeground};
+
+  --cancel-background: ${theme.cancelBackground};
+  --cancel-background-hover: ${theme.cancelBackgroundHover};
+  --cancel-border: ${theme.cancelBorder};
+  --cancel-foreground: ${theme.cancelForeground};
+
+  --input-background: ${theme.inputBackground};
+  --input-foreground: ${theme.inputForeground};
+  --input-border: ${theme.inputBorder};
+  --input-border-focus: ${theme.inputBorderFocus};
+  `;
+}
+
 /**
@@ -479,9 +550,3 @@ * Creates <style> element for widget actor (button that opens the dialog)
 
-  --bg-color: ${themes.light.background};
-  --bg-hover-color: ${themes.light.backgroundHover};
-  --fg-color: ${themes.light.foreground};
-  --error-color: ${themes.light.error};
-  --success-color: ${themes.light.success};
-  --border: ${themes.light.border};
-  --box-shadow: ${themes.light.boxShadow};
+  ${getThemedCssVariables(themes.light)}
 }
@@ -494,11 +559,3 @@
   :host {
-    --bg-color: ${themes.dark.background};
-    --bg-hover-color: ${themes.dark.backgroundHover};
-    --fg-color: ${themes.dark.foreground};
-    --error-color: ${themes.dark.error};
-    --success-color: ${themes.dark.success};
-    --border: ${themes.dark.border};
-    --box-shadow: ${themes.dark.boxShadow};
-    --font-family: ${themes.dark.fontFamily};
-    --font-size: ${themes.dark.fontSize};
+    ${getThemedCssVariables(themes.dark)}
   }
@@ -509,11 +566,3 @@ }
 :host-context([data-sentry-feedback-colorscheme="dark"]) {
-  --bg-color: ${themes.dark.background};
-  --bg-hover-color: ${themes.dark.backgroundHover};
-  --fg-color: ${themes.dark.foreground};
-  --error-color: ${themes.dark.error};
-  --success-color: ${themes.dark.success};
-  --border: ${themes.dark.border};
-  --box-shadow: ${themes.dark.boxShadow};
-  --font-family: ${themes.dark.fontFamily};
-  --font-size: ${themes.dark.fontSize};
+  ${getThemedCssVariables(themes.dark)}
 }
@@ -1504,4 +1553,10 @@ `
       colorScheme,
-      themeDark: Object.assign({}, DEFAULT_THEME.dark, themeDark),
-      themeLight: Object.assign({}, DEFAULT_THEME.light, themeLight),
+      themeDark: {
+        ...DEFAULT_THEME.dark,
+        ...themeDark,
+      },
+      themeLight: {
+        ...DEFAULT_THEME.light,
+        ...themeLight,
+      },
 
@@ -1565,6 +1620,3 @@ buttonLabel,
     try {
-      const options = {
-        ...this.options,
-        ...optionOverrides,
-      };
+      const options = mergeOptions(this.options, optionOverrides);
 
@@ -1595,6 +1647,3 @@ return this._ensureShadowHost(options, ({ shadow }) => {
     try {
-      return this._createWidget({
-        ...this.options,
-        ...optionOverrides,
-      });
+      return this._createWidget(mergeOptions(this.options, optionOverrides));
     } catch (err) {
@@ -1601,0 +1650,0 @@ utils.logger.error(err);

build/npm/esm/index.js

@@ -155,24 +155,45 @@ import { prepareEvent, getCurrentHub } from '@sentry/core';
 
+const LIGHT_BACKGROUND = '#ffffff';
+const INHERIT = 'inherit';
+const LIGHT_THEME = {
+  fontFamily: "'Helvetica Neue', Arial, sans-serif",
+  fontSize: '14px',
+
+  background: LIGHT_BACKGROUND,
+  backgroundHover: '#f6f6f7',
+  foreground: '#2b2233',
+  border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+
+  success: '#268d75',
+  error: '#df3338',
+
+  submitBackground: 'rgba(88, 74, 192, 1)',
+  submitBackgroundHover: 'rgba(108, 95, 199, 1)',
+  submitBorder: 'rgba(108, 95, 199, 1)',
+  submitForeground: LIGHT_BACKGROUND,
+
+  cancelBackground: 'transparent',
+  cancelBackgroundHover: 'var(--background-hover)',
+  cancelBorder: 'var(--border)',
+  cancelForeground: 'var(--foreground)',
+
+  inputBackground: INHERIT,
+  inputForeground: INHERIT,
+  inputBorder: 'var(--border)',
+  inputBorderFocus: 'rgba(108, 95, 199, 1)',
+};
+
 const DEFAULT_THEME = {
-  light: {
-    fontFamily: "'Helvetica Neue', Arial, sans-serif",
-    fontSize: '14px',
-    background: '#ffffff',
-    backgroundHover: '#f6f6f7',
-    foreground: '#2B2233',
-    success: '#268d75',
-    error: '#df3338',
-    border: '1.5px solid rgba(41, 35, 47, 0.13)',
-    boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
-  },
+  light: LIGHT_THEME,
   dark: {
-    fontFamily: "'Helvetica Neue', Arial, sans-serif",
-    fontSize: '14px',
+    ...LIGHT_THEME,
+
     background: '#29232f',
     backgroundHover: '#352f3b',
-    foreground: '#EBE6EF',
+    foreground: '#ebe6ef',
+    border: '1.5px solid rgba(235, 230, 239, 0.15)',
+
     success: '#2da98c',
     error: '#f55459',
-    border: '1.5px solid rgba(235, 230, 239, 0.15)',
-    boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
   },
@@ -194,2 +215,23 @@ };
 /**
+ * Quick and dirty deep merge for the Feedback integration options
+ */
+function mergeOptions(
+  defaultOptions,
+  optionOverrides,
+) {
+  return {
+    ...defaultOptions,
+    ...optionOverrides,
+    themeDark: {
+      ...defaultOptions.themeDark,
+      ...optionOverrides.themeDark,
+    },
+    themeLight: {
+      ...defaultOptions.themeLight,
+      ...optionOverrides.themeLight,
+    },
+  };
+}
+
+/**
  * Creates <style> element for widget actor (button that opens the dialog)
@@ -215,4 +257,4 @@ */
 
-  color: var(--fg-color);
-  background-color: var(--bg-color);
+  color: var(--foreground);
+  background-color: var(--background);
   border: var(--border);
@@ -225,3 +267,3 @@ box-shadow: var(--box-shadow);
 .widget__actor:hover {
-  background-color: var(--bg-hover-color);
+  background-color: var(--background-hover);
 }
@@ -244,3 +286,3 @@
 .feedback-icon path {
-  fill: var(--fg-color);
+  fill: var(--foreground);
 }
@@ -294,4 +336,4 @@ `;
   border-radius: 20px;
-  background-color: var(--bg-color);
-  color: var(--fg-color);
+  background-color: var(--background);
+  color: var(--foreground);
 
@@ -319,3 +361,3 @@ width: 320px;
 .error {
-  color: var(--error-color);
+  color: var(--error);
   margin-bottom: 16px;
@@ -333,3 +375,3 @@ }
 .form__error-container {
-  color: var(--error-color);
+  color: var(--error);
 }
@@ -363,5 +405,7 @@
   line-height: inherit;
+  background-color: var(--input-background);
   box-sizing: border-box;
-  border: var(--border);
+  border: var(--input-border);
   border-radius: 6px;
+  color: var(--input-foreground);
   font-size: 14px;
@@ -372,3 +416,3 @@ font-weight: 500;
 .form__input:focus {
-  border-color: rgba(108, 95, 199, 1);
+  border-color: var(--input-border-focus);
 }
@@ -389,3 +433,3 @@
   line-height: inherit;
-  border: var(--border);
+  border: var(--cancel-border);
   border-radius: 6px;
@@ -403,21 +447,21 @@ cursor: pointer;
 .btn--primary {
-  background-color: rgba(108, 95, 199, 1);
-  border-color: rgba(108, 95, 199, 1);
-  color: #fff;
+  background-color: var(--submit-background);
+  border-color: var(--submit-border);
+  color: var(--submit-foreground);
 }
 .btn--primary:hover {
-  background-color: rgba(88, 74, 192, 1);
+  background-color: var(--submit-background-hover);
 }
 
 .btn--default {
-  background-color: transparent;
-  color: var(--fg-color);
+  background-color: var(--cancel-background);
+  color: var(--cancel-foreground);
   font-weight: 500;
 }
 .btn--default:hover {
-  background-color: var(--bg-accent-color);
+  background-color: var(--cancel-background-hover);
 }
 
 .success-message {
-  background-color: var(--bg-color);
+  background-color: var(--background);
   border: var(--border);
@@ -427,3 +471,3 @@ border-radius: 12px;
   font-weight: 600;
-  color: var(--success-color);
+  color: var(--success);
   padding: 12px 24px;
@@ -439,3 +483,3 @@ line-height: 25px;
 .success-icon path {
-  fill: var(--success-color);
+  fill: var(--success);
 }
@@ -447,2 +491,29 @@ `;
 
+function getThemedCssVariables(theme) {
+  return `
+  --background: ${theme.background};
+  --background-hover: ${theme.backgroundHover};
+  --foreground: ${theme.foreground};
+  --error: ${theme.error};
+  --success: ${theme.success};
+  --border: ${theme.border};
+  --box-shadow: ${theme.boxShadow};
+
+  --submit-background: ${theme.submitBackground};
+  --submit-background-hover: ${theme.submitBackgroundHover};
+  --submit-border: ${theme.submitBorder};
+  --submit-foreground: ${theme.submitForeground};
+
+  --cancel-background: ${theme.cancelBackground};
+  --cancel-background-hover: ${theme.cancelBackgroundHover};
+  --cancel-border: ${theme.cancelBorder};
+  --cancel-foreground: ${theme.cancelForeground};
+
+  --input-background: ${theme.inputBackground};
+  --input-foreground: ${theme.inputForeground};
+  --input-border: ${theme.inputBorder};
+  --input-border-focus: ${theme.inputBorderFocus};
+  `;
+}
+
 /**
@@ -477,9 +548,3 @@ * Creates <style> element for widget actor (button that opens the dialog)
 
-  --bg-color: ${themes.light.background};
-  --bg-hover-color: ${themes.light.backgroundHover};
-  --fg-color: ${themes.light.foreground};
-  --error-color: ${themes.light.error};
-  --success-color: ${themes.light.success};
-  --border: ${themes.light.border};
-  --box-shadow: ${themes.light.boxShadow};
+  ${getThemedCssVariables(themes.light)}
 }
@@ -492,11 +557,3 @@
   :host {
-    --bg-color: ${themes.dark.background};
-    --bg-hover-color: ${themes.dark.backgroundHover};
-    --fg-color: ${themes.dark.foreground};
-    --error-color: ${themes.dark.error};
-    --success-color: ${themes.dark.success};
-    --border: ${themes.dark.border};
-    --box-shadow: ${themes.dark.boxShadow};
-    --font-family: ${themes.dark.fontFamily};
-    --font-size: ${themes.dark.fontSize};
+    ${getThemedCssVariables(themes.dark)}
   }
@@ -507,11 +564,3 @@ }
 :host-context([data-sentry-feedback-colorscheme="dark"]) {
-  --bg-color: ${themes.dark.background};
-  --bg-hover-color: ${themes.dark.backgroundHover};
-  --fg-color: ${themes.dark.foreground};
-  --error-color: ${themes.dark.error};
-  --success-color: ${themes.dark.success};
-  --border: ${themes.dark.border};
-  --box-shadow: ${themes.dark.boxShadow};
-  --font-family: ${themes.dark.fontFamily};
-  --font-size: ${themes.dark.fontSize};
+  ${getThemedCssVariables(themes.dark)}
 }
@@ -1502,4 +1551,10 @@ `
       colorScheme,
-      themeDark: Object.assign({}, DEFAULT_THEME.dark, themeDark),
-      themeLight: Object.assign({}, DEFAULT_THEME.light, themeLight),
+      themeDark: {
+        ...DEFAULT_THEME.dark,
+        ...themeDark,
+      },
+      themeLight: {
+        ...DEFAULT_THEME.light,
+        ...themeLight,
+      },
 
@@ -1563,6 +1618,3 @@ buttonLabel,
     try {
-      const options = {
-        ...this.options,
-        ...optionOverrides,
-      };
+      const options = mergeOptions(this.options, optionOverrides);
 
@@ -1593,6 +1645,3 @@ return this._ensureShadowHost(options, ({ shadow }) => {
     try {
-      return this._createWidget({
-        ...this.options,
-        ...optionOverrides,
-      });
+      return this._createWidget(mergeOptions(this.options, optionOverrides));
     } catch (err) {
@@ -1599,0 +1648,0 @@ logger.error(err);

build/npm/types-ts3.8/constants.d.ts

@@ -8,17 +8,41 @@ export declare const DEFAULT_THEME: {
         foreground: string;
+        border: string;
+        boxShadow: string;
         success: string;
         error: string;
-        border: string;
-        boxShadow: string;
+        submitBackground: string;
+        submitBackgroundHover: string;
+        submitBorder: string;
+        submitForeground: string;
+        cancelBackground: string;
+        cancelBackgroundHover: string;
+        cancelBorder: string;
+        cancelForeground: string;
+        inputBackground: string;
+        inputForeground: string;
+        inputBorder: string;
+        inputBorderFocus: string;
     };
     dark: {
-        fontFamily: string;
-        fontSize: string;
         background: string;
         backgroundHover: string;
         foreground: string;
+        border: string;
         success: string;
         error: string;
-        border: string;
+        fontFamily: string;
+        fontSize: string;
         boxShadow: string;
+        submitBackground: string;
+        submitBackgroundHover: string;
+        submitBorder: string;
+        submitForeground: string;
+        cancelBackground: string;
+        cancelBackgroundHover: string;
+        cancelBorder: string;
+        cancelForeground: string;
+        inputBackground: string;
+        inputForeground: string;
+        inputBorder: string;
+        inputBorderFocus: string;
     };
@@ -25,0 +49,0 @@ };

build/npm/types-ts3.8/integration.d.ts

 import { Integration } from '@sentry/types';
-import { CreateWidgetOptionOverrides, FeedbackConfigurationWithDefaults, FeedbackInternalOptions, Widget } from './types';
+import { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
 import { createShadowHost } from './widget/createShadowHost';
-type FeedbackConfiguration = Partial<FeedbackConfigurationWithDefaults>;
 /**
@@ -43,3 +42,3 @@ * Feedback integration. When added as an integration to the SDK, it will
     private _hasInsertedActorStyles;
-    constructor({ id, autoInject, showEmail, showName, useSentryUser, isAnonymous, isEmailRequired, isNameRequired, themeDark, themeLight, colorScheme, buttonLabel, cancelButtonLabel, submitButtonLabel, formTitle, emailPlaceholder, emailLabel, messagePlaceholder, messageLabel, namePlaceholder, nameLabel, successMessageText, onActorClick, onDialogClose, onDialogOpen, onSubmitError, onSubmitSuccess, }?: FeedbackConfiguration);
+    constructor({ id, autoInject, showEmail, showName, useSentryUser, isAnonymous, isEmailRequired, isNameRequired, themeDark, themeLight, colorScheme, buttonLabel, cancelButtonLabel, submitButtonLabel, formTitle, emailPlaceholder, emailLabel, messagePlaceholder, messageLabel, namePlaceholder, nameLabel, successMessageText, onActorClick, onDialogClose, onDialogOpen, onSubmitError, onSubmitSuccess, }?: OptionalFeedbackConfiguration);
     /**
@@ -52,7 +51,7 @@ * Setup and initialize replay container
      */
-    attachTo(el: Element | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null;
+    attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null;
     /**
      * Creates a new widget. Accepts partial options to override any options passed to constructor.
      */
-    createWidget(optionOverrides: CreateWidgetOptionOverrides): Widget | null;
+    createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null;
     /**
@@ -79,3 +78,2 @@ * Removes a single widget
 }
-export {};
 //# sourceMappingURL=integration.d.ts.map

build/npm/types-ts3.8/types/index.d.ts

@@ -176,8 +176,14 @@ import { Event, Primitive } from '@sentry/types';
 }
-export interface FeedbackConfigurationWithDefaults extends FeedbackGeneralConfiguration, FeedbackThemeConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
+/**
+ * The integration's internal `options` member where every value should be set
+ */
+export interface FeedbackInternalOptions extends FeedbackGeneralConfiguration, FeedbackThemeConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
 }
 /**
- * The integration's internal `options` member
+ * Partial configuration that overrides default configuration values
  */
-export type FeedbackInternalOptions = FeedbackConfigurationWithDefaults;
+export interface OptionalFeedbackConfiguration extends Pick<Partial<FeedbackInternalOptions>, Exclude<keyof Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>> {
+    themeLight?: Partial<FeedbackTheme>;
+    themeDark?: Partial<FeedbackTheme>;
+}
 export interface FeedbackTheme {
@@ -220,4 +226,51 @@ /**
     error: string;
+    /**
+     * Background color for the submit button
+     */
+    submitBackground: string;
+    /**
+     * Background color when hovering over the submit button
+     */
+    submitBackgroundHover: string;
+    /**
+     * Border style for the submit button
+     */
+    submitBorder: string;
+    /**
+     * Foreground color for the submit button
+     */
+    submitForeground: string;
+    /**
+     * Background color for the cancel button
+     */
+    cancelBackground: string;
+    /**
+     * Background color when hovering over the cancel button
+     */
+    cancelBackgroundHover: string;
+    /**
+     * Border style for the cancel button
+     */
+    cancelBorder: string;
+    /**
+     * Foreground color for the cancel button
+     */
+    cancelForeground: string;
+    /**
+     * Background color for form inputs
+     */
+    inputBackground: string;
+    /**
+     * Foreground color for form inputs
+     */
+    inputForeground: string;
+    /**
+     * Border styles for form inputs
+     */
+    inputBorder: string;
+    /**
+     * Border styles for form inputs when focused
+     */
+    inputBorderFocus: string;
 }
-export type CreateWidgetOptionOverrides = Partial<FeedbackConfigurationWithDefaults>;
 export interface FeedbackThemes {
@@ -224,0 +277,0 @@ dark: FeedbackTheme;

build/npm/types-ts3.8/widget/Actor.d.ts

@@ -1,3 +0,3 @@
-import { FeedbackComponent, FeedbackConfigurationWithDefaults } from '../types';
-export interface ActorProps extends Pick<FeedbackConfigurationWithDefaults, 'buttonLabel'> {
+import { FeedbackComponent, FeedbackInternalOptions } from '../types';
+export interface ActorProps extends Pick<FeedbackInternalOptions, 'buttonLabel'> {
     onClick?: (e: MouseEvent) => void;
@@ -4,0 +4,0 @@ }

build/npm/types/constants.d.ts

@@ -8,17 +8,41 @@ export declare const DEFAULT_THEME: {
         foreground: string;
+        border: string;
+        boxShadow: string;
         success: string;
         error: string;
-        border: string;
-        boxShadow: string;
+        submitBackground: string;
+        submitBackgroundHover: string;
+        submitBorder: string;
+        submitForeground: string;
+        cancelBackground: string;
+        cancelBackgroundHover: string;
+        cancelBorder: string;
+        cancelForeground: string;
+        inputBackground: string;
+        inputForeground: string;
+        inputBorder: string;
+        inputBorderFocus: string;
     };
     dark: {
-        fontFamily: string;
-        fontSize: string;
         background: string;
         backgroundHover: string;
         foreground: string;
+        border: string;
         success: string;
         error: string;
-        border: string;
+        fontFamily: string;
+        fontSize: string;
         boxShadow: string;
+        submitBackground: string;
+        submitBackgroundHover: string;
+        submitBorder: string;
+        submitForeground: string;
+        cancelBackground: string;
+        cancelBackgroundHover: string;
+        cancelBorder: string;
+        cancelForeground: string;
+        inputBackground: string;
+        inputForeground: string;
+        inputBorder: string;
+        inputBorderFocus: string;
     };
@@ -25,0 +49,0 @@ };

build/npm/types/integration.d.ts

 import type { Integration } from '@sentry/types';
-import type { CreateWidgetOptionOverrides, FeedbackConfigurationWithDefaults, FeedbackInternalOptions, Widget } from './types';
+import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
 import { createShadowHost } from './widget/createShadowHost';
-type FeedbackConfiguration = Partial<FeedbackConfigurationWithDefaults>;
 /**
@@ -43,3 +42,3 @@ * Feedback integration. When added as an integration to the SDK, it will
     private _hasInsertedActorStyles;
-    constructor({ id, autoInject, showEmail, showName, useSentryUser, isAnonymous, isEmailRequired, isNameRequired, themeDark, themeLight, colorScheme, buttonLabel, cancelButtonLabel, submitButtonLabel, formTitle, emailPlaceholder, emailLabel, messagePlaceholder, messageLabel, namePlaceholder, nameLabel, successMessageText, onActorClick, onDialogClose, onDialogOpen, onSubmitError, onSubmitSuccess, }?: FeedbackConfiguration);
+    constructor({ id, autoInject, showEmail, showName, useSentryUser, isAnonymous, isEmailRequired, isNameRequired, themeDark, themeLight, colorScheme, buttonLabel, cancelButtonLabel, submitButtonLabel, formTitle, emailPlaceholder, emailLabel, messagePlaceholder, messageLabel, namePlaceholder, nameLabel, successMessageText, onActorClick, onDialogClose, onDialogOpen, onSubmitError, onSubmitSuccess, }?: OptionalFeedbackConfiguration);
     /**
@@ -52,7 +51,7 @@ * Setup and initialize replay container
      */
-    attachTo(el: Element | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null;
+    attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null;
     /**
      * Creates a new widget. Accepts partial options to override any options passed to constructor.
      */
-    createWidget(optionOverrides: CreateWidgetOptionOverrides): Widget | null;
+    createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null;
     /**
@@ -79,3 +78,2 @@ * Removes a single widget
 }
-export {};
 //# sourceMappingURL=integration.d.ts.map

build/npm/types/types/index.d.ts

@@ -176,8 +176,14 @@ import type { Event, Primitive } from '@sentry/types';
 }
-export interface FeedbackConfigurationWithDefaults extends FeedbackGeneralConfiguration, FeedbackThemeConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
+/**
+ * The integration's internal `options` member where every value should be set
+ */
+export interface FeedbackInternalOptions extends FeedbackGeneralConfiguration, FeedbackThemeConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
 }
 /**
- * The integration's internal `options` member
+ * Partial configuration that overrides default configuration values
  */
-export type FeedbackInternalOptions = FeedbackConfigurationWithDefaults;
+export interface OptionalFeedbackConfiguration extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
+    themeLight?: Partial<FeedbackTheme>;
+    themeDark?: Partial<FeedbackTheme>;
+}
 export interface FeedbackTheme {
@@ -220,4 +226,51 @@ /**
     error: string;
+    /**
+     * Background color for the submit button
+     */
+    submitBackground: string;
+    /**
+     * Background color when hovering over the submit button
+     */
+    submitBackgroundHover: string;
+    /**
+     * Border style for the submit button
+     */
+    submitBorder: string;
+    /**
+     * Foreground color for the submit button
+     */
+    submitForeground: string;
+    /**
+     * Background color for the cancel button
+     */
+    cancelBackground: string;
+    /**
+     * Background color when hovering over the cancel button
+     */
+    cancelBackgroundHover: string;
+    /**
+     * Border style for the cancel button
+     */
+    cancelBorder: string;
+    /**
+     * Foreground color for the cancel button
+     */
+    cancelForeground: string;
+    /**
+     * Background color for form inputs
+     */
+    inputBackground: string;
+    /**
+     * Foreground color for form inputs
+     */
+    inputForeground: string;
+    /**
+     * Border styles for form inputs
+     */
+    inputBorder: string;
+    /**
+     * Border styles for form inputs when focused
+     */
+    inputBorderFocus: string;
 }
-export type CreateWidgetOptionOverrides = Partial<FeedbackConfigurationWithDefaults>;
 export interface FeedbackThemes {
@@ -224,0 +277,0 @@ dark: FeedbackTheme;

build/npm/types/widget/Actor.d.ts

@@ -1,3 +0,3 @@
-import type { FeedbackComponent, FeedbackConfigurationWithDefaults } from '../types';
-export interface ActorProps extends Pick<FeedbackConfigurationWithDefaults, 'buttonLabel'> {
+import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
+export interface ActorProps extends Pick<FeedbackInternalOptions, 'buttonLabel'> {
     onClick?: (e: MouseEvent) => void;
@@ -4,0 +4,0 @@ }

package.json

 {
   "name": "@sentry-internal/feedback",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.7",
   "description": "Sentry SDK integration for user feedback",
@@ -5,0 +5,0 @@ "repository": "git://github.com/getsentry/sentry-javascript.git",

README.md

@@ -90,19 +90,22 @@ <p align="center">
 | --------- | ------- | ----------- |
-| `buttonLabel` | `"Feedback"` | The label of the widget button. |
-| `submitButtonLabel` | `"Send Feedback"` | The label of the submit button used in the feedback form dialog. |
-| `cancelButtonLabel` | `"Cancel"` | The label of the cancel button used in the feedback form dialog. |
-| `formTitle` | `"Send Feedback"` | The title at the top of the feedback form dialog. |
-| `nameLabel` | `"Full Name"` | The label of the name input field. |
-| `namePlaceholder` | `"Full Name"` | The placeholder for the name input field. |
-| `emailLabel` | `"Email"` | The label of the email input field. ||
-| `emailPlaceholder` | `"Email"` | The placeholder for the email input field. |
-| `messageLabel` | `"Description"` | The label for the feedback description input field. |
-| `messagePlaceholder` | `"What's the issue? What did you expect?"` | The placeholder for the feedback description input field. |
-| `successMessageText` | `"Thank you for your report!"` | The message to be displayed after a succesful feedback submission. |
+| `buttonLabel` | `Report a Bug` | The label of the widget button. |
+| `submitButtonLabel` | `Send Bug Report` | The label of the submit button used in the feedback form dialog. |
+| `cancelButtonLabel` | `Cancel` | The label of the cancel button used in the feedback form dialog. |
+| `formTitle` | `Report a Bug` | The title at the top of the feedback form dialog. |
+| `nameLabel` | `Name` | The label of the name input field. |
+| `namePlaceholder` | `Your Name` | The placeholder for the name input field. |
+| `emailLabel` | `Email` | The label of the email input field. ||
+| `emailPlaceholder` | `[e-mail]` | The placeholder for the email input field. |
+| `messageLabel` | `Description` | The label for the feedback description input field. |
+| `messagePlaceholder` | `What's the bug? What did you expect?` | The placeholder for the feedback description input field. |
+| `successMessageText` | `Thank you for your report!` | The message to be displayed after a succesful feedback submission. |
 
+
+Example of customization
+
 ```javascript
 new Feedback({
-  buttonLabel: 'Bug Report',
-  submitButtonLabel: 'Send Report',
-  formTitle: 'Send Bug Report',
+  buttonLabel: 'Feedback',
+  submitButtonLabel: 'Send Feedback',
+  formTitle: 'Send Feedback',
 });
@@ -116,9 +119,21 @@ ```
 | --- | --- | --- | --- | --- |
-| `background` | `--bg-color` | `#ffffff` | `#29232f` | Background color of the widget actor and dialog. |
-| `backgroundHover` | `--bg-hover-color` | `#f6f6f7` | `#352f3b` | The background color of widget actor when in a hover state |
-| `foreground` | `--fg-color` | `#2b2233` | `#ebe6ef` | The foreground color, e.g. text color |
-| `error` | `--error-color` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) |
-| `success` | `--success-color` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) |
+| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget actor and dialog |
+| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of widget actor when in a hover state |
+| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color |
+| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) |
+| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) |
 | `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget actor and dialog |
 | `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget actor and dialog |
+| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button |
+| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button |
+| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button |
+| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button |
+| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button |
+| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button |
+| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | 
+| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button |
+| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs |
+| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs |
+| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs |
+| `inputBorderFocus` | `--input-border-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border styles for form inputs when focused |
 
@@ -138,3 +153,3 @@ Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration.
 #sentry-feedback {
-  --bg-color: #cccccc;
+  --background: #cccccc;
 }
@@ -194,3 +209,3 @@ ```
 ```html
-<form id="my-feedback-form>
+<form id="my-feedback-form">
   <input name="name" />
@@ -209,1 +224,15 @@ <input name="email" />
 ```
+
+## Alerting on User Feedback Reports
+
+Note: The following instructions are to be followed in the Sentry product.
+
+If you have Sentry's default issue alert ("Alert me on every new issue") turned on for the project you are setting up User Feedback on, no action is required to have alerting on each user feedback report. 
+
+If you don't have Sentry's default issue alert turned on, follow these steps:
+
+1. Navigate to [Create New Alert Rule](https://sentry.io/alerts/new/issue/) in Sentry (Click "Alerts" in the left-nav menu, "Create Alert" in the top right corner, ensure the "Issues" radio button is selected under the "Errors" category, and then click "Set Conditions")
+2. In "Set conditions", add an "IF" filter for `The issue's category is equal to "Feedback"`
+3. Add any other alert rules
+
+![Feedback Alert Rule Creation Screenshot](https://github.com/getsentry/sentry-javascript/assets/79684/1d941967-debb-4ad6-9458-3226c02ec08e)

src/constants.ts

@@ -0,23 +1,44 @@
+const LIGHT_BACKGROUND = '#ffffff';
+const INHERIT = 'inherit';
+const LIGHT_THEME = {
+  fontFamily: "'Helvetica Neue', Arial, sans-serif",
+  fontSize: '14px',
+
+  background: LIGHT_BACKGROUND,
+  backgroundHover: '#f6f6f7',
+  foreground: '#2b2233',
+  border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+
+  success: '#268d75',
+  error: '#df3338',
+
+  submitBackground: 'rgba(88, 74, 192, 1)',
+  submitBackgroundHover: 'rgba(108, 95, 199, 1)',
+  submitBorder: 'rgba(108, 95, 199, 1)',
+  submitForeground: LIGHT_BACKGROUND,
+
+  cancelBackground: 'transparent',
+  cancelBackgroundHover: 'var(--background-hover)',
+  cancelBorder: 'var(--border)',
+  cancelForeground: 'var(--foreground)',
+
+  inputBackground: INHERIT,
+  inputForeground: INHERIT,
+  inputBorder: 'var(--border)',
+  inputBorderFocus: 'rgba(108, 95, 199, 1)',
+};
+
 export const DEFAULT_THEME = {
-  light: {
-    fontFamily: "'Helvetica Neue', Arial, sans-serif",
-    fontSize: '14px',
-    background: '#ffffff',
-    backgroundHover: '#f6f6f7',
-    foreground: '#2B2233',
-    success: '#268d75',
-    error: '#df3338',
-    border: '1.5px solid rgba(41, 35, 47, 0.13)',
-    boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
-  },
+  light: LIGHT_THEME,
   dark: {
-    fontFamily: "'Helvetica Neue', Arial, sans-serif",
-    fontSize: '14px',
+    ...LIGHT_THEME,
+
     background: '#29232f',
     backgroundHover: '#352f3b',
-    foreground: '#EBE6EF',
+    foreground: '#ebe6ef',
+    border: '1.5px solid rgba(235, 230, 239, 0.15)',
+
     success: '#2da98c',
     error: '#f55459',
-    border: '1.5px solid rgba(235, 230, 239, 0.15)',
-    boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
   },
@@ -24,0 +45,0 @@ };

src/integration.ts

@@ -19,8 +19,4 @@ import { WINDOW } from '@sentry/browser';
 } from './constants';
-import type {
-  CreateWidgetOptionOverrides,
-  FeedbackConfigurationWithDefaults,
-  FeedbackInternalOptions,
-  Widget,
-} from './types';
+import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
+import { mergeOptions } from './util/mergeOptions';
 import { createActorStyles } from './widget/Actor.css';
@@ -32,4 +28,2 @@ import { createShadowHost } from './widget/createShadowHost';
 
-type FeedbackConfiguration = Partial<FeedbackConfigurationWithDefaults>;
-
 /**
@@ -115,3 +109,3 @@ * Feedback integration. When added as an integration to the SDK, it will
     onSubmitSuccess,
-  }: FeedbackConfiguration = {}) {
+  }: OptionalFeedbackConfiguration = {}) {
     // Initializations
@@ -138,4 +132,10 @@ this.name = Feedback.id;
       colorScheme,
-      themeDark: Object.assign({}, DEFAULT_THEME.dark, themeDark),
-      themeLight: Object.assign({}, DEFAULT_THEME.light, themeLight),
+      themeDark: {
+        ...DEFAULT_THEME.dark,
+        ...themeDark,
+      },
+      themeLight: {
+        ...DEFAULT_THEME.light,
+        ...themeLight,
+      },
 
@@ -197,8 +197,5 @@ buttonLabel,
    */
-  public attachTo(el: Element | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null {
+  public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
     try {
-      const options = {
-        ...this.options,
-        ...optionOverrides,
-      };
+      const options = mergeOptions(this.options, optionOverrides);
 
@@ -227,8 +224,5 @@ return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
    */
-  public createWidget(optionOverrides: CreateWidgetOptionOverrides): Widget | null {
+  public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
     try {
-      return this._createWidget({
-        ...this.options,
-        ...optionOverrides,
-      });
+      return this._createWidget(mergeOptions(this.options, optionOverrides));
     } catch (err) {
@@ -235,0 +229,0 @@ logger.error(err);

src/types/index.ts

@@ -199,3 +199,6 @@ import type { Event, Primitive } from '@sentry/types';
 
-export interface FeedbackConfigurationWithDefaults
+/**
+ * The integration's internal `options` member where every value should be set
+ */
+export interface FeedbackInternalOptions
   extends FeedbackGeneralConfiguration,
@@ -207,5 +210,9 @@ FeedbackThemeConfiguration,
 /**
- * The integration's internal `options` member
+ * Partial configuration that overrides default configuration values
  */
-export type FeedbackInternalOptions = FeedbackConfigurationWithDefaults;
+export interface OptionalFeedbackConfiguration
+  extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
+  themeLight?: Partial<FeedbackTheme>;
+  themeDark?: Partial<FeedbackTheme>;
+}
 
@@ -249,6 +256,55 @@ export interface FeedbackTheme {
   error: string;
+
+  /**
+   * Background color for the submit button
+   */
+  submitBackground: string;
+  /**
+   * Background color when hovering over the submit button
+   */
+  submitBackgroundHover: string;
+  /**
+   * Border style for the submit button
+   */
+  submitBorder: string;
+  /**
+   * Foreground color for the submit button
+   */
+  submitForeground: string;
+
+  /**
+   * Background color for the cancel button
+   */
+  cancelBackground: string;
+  /**
+   * Background color when hovering over the cancel button
+   */
+  cancelBackgroundHover: string;
+  /**
+   * Border style for the cancel button
+   */
+  cancelBorder: string;
+  /**
+   * Foreground color for the cancel button
+   */
+  cancelForeground: string;
+
+  /**
+   * Background color for form inputs
+   */
+  inputBackground: string;
+  /**
+   * Foreground color for form inputs
+   */
+  inputForeground: string;
+  /**
+   * Border styles for form inputs
+   */
+  inputBorder: string;
+  /**
+   * Border styles for form inputs when focused
+   */
+  inputBorderFocus: string;
 }
 
-export type CreateWidgetOptionOverrides = Partial<FeedbackConfigurationWithDefaults>;
-
 export interface FeedbackThemes {
@@ -255,0 +311,0 @@ dark: FeedbackTheme;

src/widget/Actor.css.ts

@@ -22,4 +22,4 @@ /**
 
-  color: var(--fg-color);
-  background-color: var(--bg-color);
+  color: var(--foreground);
+  background-color: var(--background);
   border: var(--border);
@@ -32,3 +32,3 @@ box-shadow: var(--box-shadow);
 .widget__actor:hover {
-  background-color: var(--bg-hover-color);
+  background-color: var(--background-hover);
 }
@@ -51,3 +51,3 @@
 .feedback-icon path {
-  fill: var(--fg-color);
+  fill: var(--foreground);
 }
@@ -54,0 +54,0 @@ `;

src/widget/Actor.ts

@@ -1,6 +0,6 @@
-import type { FeedbackComponent, FeedbackConfigurationWithDefaults } from '../types';
+import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
 import { Icon } from './Icon';
 import { createElement } from './util/createElement';
 
-export interface ActorProps extends Pick<FeedbackConfigurationWithDefaults, 'buttonLabel'> {
+export interface ActorProps extends Pick<FeedbackInternalOptions, 'buttonLabel'> {
   onClick?: (e: MouseEvent) => void;
@@ -7,0 +7,0 @@ }

src/widget/Dialog.css.ts

@@ -43,4 +43,4 @@ /**
   border-radius: 20px;
-  background-color: var(--bg-color);
-  color: var(--fg-color);
+  background-color: var(--background);
+  color: var(--foreground);
 
@@ -68,3 +68,3 @@ width: 320px;
 .error {
-  color: var(--error-color);
+  color: var(--error);
   margin-bottom: 16px;
@@ -82,3 +82,3 @@ }
 .form__error-container {
-  color: var(--error-color);
+  color: var(--error);
 }
@@ -112,5 +112,7 @@
   line-height: inherit;
+  background-color: var(--input-background);
   box-sizing: border-box;
-  border: var(--border);
+  border: var(--input-border);
   border-radius: 6px;
+  color: var(--input-foreground);
   font-size: 14px;
@@ -121,3 +123,3 @@ font-weight: 500;
 .form__input:focus {
-  border-color: rgba(108, 95, 199, 1);
+  border-color: var(--input-border-focus);
 }
@@ -138,3 +140,3 @@
   line-height: inherit;
-  border: var(--border);
+  border: var(--cancel-border);
   border-radius: 6px;
@@ -152,21 +154,21 @@ cursor: pointer;
 .btn--primary {
-  background-color: rgba(108, 95, 199, 1);
-  border-color: rgba(108, 95, 199, 1);
-  color: #fff;
+  background-color: var(--submit-background);
+  border-color: var(--submit-border);
+  color: var(--submit-foreground);
 }
 .btn--primary:hover {
-  background-color: rgba(88, 74, 192, 1);
+  background-color: var(--submit-background-hover);
 }
 
 .btn--default {
-  background-color: transparent;
-  color: var(--fg-color);
+  background-color: var(--cancel-background);
+  color: var(--cancel-foreground);
   font-weight: 500;
 }
 .btn--default:hover {
-  background-color: var(--bg-accent-color);
+  background-color: var(--cancel-background-hover);
 }
 
 .success-message {
-  background-color: var(--bg-color);
+  background-color: var(--background);
   border: var(--border);
@@ -176,3 +178,3 @@ border-radius: 12px;
   font-weight: 600;
-  color: var(--success-color);
+  color: var(--success);
   padding: 12px 24px;
@@ -188,3 +190,3 @@ line-height: 25px;
 .success-icon path {
-  fill: var(--success-color);
+  fill: var(--success);
 }
@@ -191,0 +193,0 @@ `;

src/widget/Main.css.ts

@@ -1,3 +0,30 @@
-import type { FeedbackThemes } from '../types';
+import type { FeedbackTheme, FeedbackThemes } from '../types';
 
+function getThemedCssVariables(theme: FeedbackTheme): string {
+  return `
+  --background: ${theme.background};
+  --background-hover: ${theme.backgroundHover};
+  --foreground: ${theme.foreground};
+  --error: ${theme.error};
+  --success: ${theme.success};
+  --border: ${theme.border};
+  --box-shadow: ${theme.boxShadow};
+
+  --submit-background: ${theme.submitBackground};
+  --submit-background-hover: ${theme.submitBackgroundHover};
+  --submit-border: ${theme.submitBorder};
+  --submit-foreground: ${theme.submitForeground};
+
+  --cancel-background: ${theme.cancelBackground};
+  --cancel-background-hover: ${theme.cancelBackgroundHover};
+  --cancel-border: ${theme.cancelBorder};
+  --cancel-foreground: ${theme.cancelForeground};
+
+  --input-background: ${theme.inputBackground};
+  --input-foreground: ${theme.inputForeground};
+  --input-border: ${theme.inputBorder};
+  --input-border-focus: ${theme.inputBorderFocus};
+  `;
+}
+
 /**
@@ -32,9 +59,3 @@ * Creates <style> element for widget actor (button that opens the dialog)
 
-  --bg-color: ${themes.light.background};
-  --bg-hover-color: ${themes.light.backgroundHover};
-  --fg-color: ${themes.light.foreground};
-  --error-color: ${themes.light.error};
-  --success-color: ${themes.light.success};
-  --border: ${themes.light.border};
-  --box-shadow: ${themes.light.boxShadow};
+  ${getThemedCssVariables(themes.light)}
 }
@@ -47,11 +68,3 @@
   :host {
-    --bg-color: ${themes.dark.background};
-    --bg-hover-color: ${themes.dark.backgroundHover};
-    --fg-color: ${themes.dark.foreground};
-    --error-color: ${themes.dark.error};
-    --success-color: ${themes.dark.success};
-    --border: ${themes.dark.border};
-    --box-shadow: ${themes.dark.boxShadow};
-    --font-family: ${themes.dark.fontFamily};
-    --font-size: ${themes.dark.fontSize};
+    ${getThemedCssVariables(themes.dark)}
   }
@@ -62,11 +75,3 @@ }
 :host-context([data-sentry-feedback-colorscheme="dark"]) {
-  --bg-color: ${themes.dark.background};
-  --bg-hover-color: ${themes.dark.backgroundHover};
-  --fg-color: ${themes.dark.foreground};
-  --error-color: ${themes.dark.error};
-  --success-color: ${themes.dark.success};
-  --border: ${themes.dark.border};
-  --box-shadow: ${themes.dark.boxShadow};
-  --font-family: ${themes.dark.fontFamily};
-  --font-size: ${themes.dark.fontSize};
+  ${getThemedCssVariables(themes.dark)}
 }
@@ -73,0 +78,0 @@ `

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

952536

increased by5.21%

Number of package files

173

increased by9.49%

Lines of code

7650

increased by4.94%

Number of lines in readme file

234

increased by14.15%

No dependency changes