diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts index 48f699408762..6e3e9055b511 100644 --- a/packages/feedback/src/constants.ts +++ b/packages/feedback/src/constants.ts @@ -16,6 +16,7 @@ const LIGHT_THEME = { backgroundHover: '#f6f6f7', foreground: '#2b2233', border: '1.5px solid rgba(41, 35, 47, 0.13)', + borderRadius: '12px', boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)', success: '#268d75', @@ -39,6 +40,9 @@ const LIGHT_THEME = { inputForeground: INHERIT, inputBorder: 'var(--border)', inputOutlineFocus: SUBMIT_COLOR, + + formBorderRadius: '20px', + formContentBorderRadius: '6px', }; export const DEFAULT_THEME = { diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index a86fd4ee4107..c2642b54d09c 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/feedback/src/types/index.ts @@ -215,6 +215,10 @@ export interface FeedbackTheme { * Border styling for actor and dialog */ border: string; + /** + * Border radius styling for actor + */ + borderRadius: string; /** * Box shadow for actor and dialog */ @@ -299,6 +303,14 @@ export interface FeedbackTheme { * Border styles for form inputs when focused */ inputOutlineFocus: string; + /** + * Border radius for dialog + */ + formBorderRadius: string; + /** + * Border radius for form inputs + */ + formContentBorderRadius: string; } export interface FeedbackThemes { diff --git a/packages/feedback/src/widget/Actor.css.ts b/packages/feedback/src/widget/Actor.css.ts index c0fd8d3bd68f..44bd60a3418e 100644 --- a/packages/feedback/src/widget/Actor.css.ts +++ b/packages/feedback/src/widget/Actor.css.ts @@ -11,7 +11,7 @@ export function createActorStyles(d: Document): HTMLStyleElement { align-items: center; gap: 8px; - border-radius: 12px; + border-radius: var(--border-radius); cursor: pointer; font-size: 14px; font-weight: 600; diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts index b9cd5a499c13..b3924f00524a 100644 --- a/packages/feedback/src/widget/Dialog.css.ts +++ b/packages/feedback/src/widget/Dialog.css.ts @@ -38,7 +38,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { top: var(--top); border: var(--border); - border-radius: 20px; + border-radius: var(--form-border-radius); background-color: var(--background); color: var(--foreground); @@ -113,7 +113,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { background-color: var(--input-background); box-sizing: border-box; border: var(--input-border); - border-radius: 6px; + border-radius: var(--form-content-border-radius); color: var(--input-foreground); font-size: 14px; font-weight: 500; @@ -138,7 +138,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { .btn { line-height: inherit; border: var(--cancel-border); - border-radius: 6px; + border-radius: var(--form-content-border-radius); cursor: pointer; font-size: 14px; font-weight: 600; @@ -178,7 +178,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { .success-message { background-color: var(--background); border: var(--border); - border-radius: 12px; + border-radius: var(--border-radius); box-shadow: var(--box-shadow); font-weight: 600; color: var(--success); diff --git a/packages/feedback/src/widget/Main.css.ts b/packages/feedback/src/widget/Main.css.ts index 0c74fedf6832..32bb8048e678 100644 --- a/packages/feedback/src/widget/Main.css.ts +++ b/packages/feedback/src/widget/Main.css.ts @@ -8,6 +8,7 @@ function getThemedCssVariables(theme: FeedbackTheme): string { --error: ${theme.error}; --success: ${theme.success}; --border: ${theme.border}; + --border-radius: ${theme.borderRadius}; --box-shadow: ${theme.boxShadow}; --submit-background: ${theme.submitBackground}; @@ -28,6 +29,9 @@ function getThemedCssVariables(theme: FeedbackTheme): string { --input-foreground: ${theme.inputForeground}; --input-border: ${theme.inputBorder}; --input-outline-focus: ${theme.inputOutlineFocus}; + + --form-border-radius: ${theme.formBorderRadius}; + --form-content-border-radius: ${theme.formContentBorderRadius}; `; }