initial style changes

lexi-taylor · lexi-taylor · commit ce64126d24a1 · 2025-04-17T15:14:47.000Z
diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts
@@ -932,7 +932,7 @@ type StyleOptions = {
   /**
    * (EXPERIMENTAL) Feedback buttons placement
    *
-   * - `'activity-actions'` - place feedback buttons inside activity actions
+   * - `'activity-actions'` - place feedback buttons inside activity actions - will show feedback form
    * - `'activity-status'` - place feedback buttons inside activity status
    *
    * @default 'activity-status'
@@ -943,31 +943,16 @@ type StyleOptions = {
    */
   feedbackActionsPlacement?: 'activity-actions' | 'activity-status';
 
-  fontColorPrimary?: string;
-  fontColorSecondary?: string;
-
-  primaryButtonBackgroundColor?: string;
-  primaryButtonFontColor?: string;
-  primaryButtonBorderColor?: string;
-  primaryButtonBackgroundColorOnHover?: string;
-  primaryButtonBackgroundColorOnActive?: string;
-  primaryButtonBackgroundColorOnDisabled?: string;
-  primaryButtonFontColorOnHover?: string;
-  primaryButtonFontColorOnDisabled?: string;
-
-  secondaryButtonBackgroundColor?: string;
-  secondaryButtonBackgroundColorOnHover?: string;
-  secondaryButtonBorderColor?: string;
-  secondaryButtonFontColor?: string;
-  secondaryButtonFontColorOnHover?: string;
-
-  textBoxBackgroundColor?: string;
-  textBoxBorderColor?: string;
-  textBoxBorderColorOnFocus?: string;
-  textBoxBorderColorOnActive?: string;
-  textBoxTextColor?: string;
-  textBoxMinHeight?: number;
-  textBoxMinWidth?: number;
+  feedbackFormPrimaryColor?: string;
+  feedbackFormPrimarySubmittedColor?: string;
+  feedbackFormLightestColor?: string;
+  feedbackFormNeutralLightColor?: string;
+  feedbackFormNeutralMediumColor?: string;
+  feedbackFormNeutralDarkColor?: string;
+  feedbackTextBoxMinHeight?: number;
+  feedbackTextBoxMinWidth?: number;
+  feedbackTextBoxPadding?: string;
+
   /**
    * Use continuous mode for speech recognition. Default to `false`.
    *
diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts
@@ -308,31 +308,15 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
 
   feedbackActionsPlacement: 'activity-status' as const,
 
-  fontColorPrimary: 'black',
-  fontColorSecondary: 'black',
-
-  primaryButtonBackgroundColor: DEFAULT_ACCENT,
-  primaryButtonFontColor: 'white',
-  primaryButtonBorderColor: DEFAULT_ACCENT,
-  primaryButtonBackgroundColorOnHover: '#004a98',
-  primaryButtonBackgroundColorOnActive: DEFAULT_ACCENT,
-  primaryButtonBackgroundColorOnDisabled: DEFAULT_ACCENT,
-  primaryButtonFontColorOnHover: 'white',
-  primaryButtonFontColorOnDisabled: 'white',
-
-  secondaryButtonFontColor: 'black',
-  secondaryButtonBackgroundColor: 'White',
-  secondaryButtonBackgroundColorOnHover: DEFAULT_SUBTLE,
-  secondaryButtonBorderColor: DEFAULT_SUBTLE,
-  secondaryButtonFontColorOnHover: 'white',
-
-  textBoxBackgroundColor: 'White',
-  textBoxBorderColor: DEFAULT_SUBTLE,
-  textBoxBorderColorOnFocus: DEFAULT_SUBTLE,
-  textBoxBorderColorOnActive: DEFAULT_ACCENT,
-  textBoxTextColor: 'black',
-  textBoxMinHeight: 60,
-  textBoxMinWidth: 280,
+  feedbackFormPrimaryColor: DEFAULT_ACCENT,
+  feedbackFormPrimarySubmittedColor: '#004a98',
+  feedbackFormLightestColor: 'white',
+  feedbackFormNeutralLightColor: '#E8E8E8',
+  feedbackFormNeutralMediumColor: DEFAULT_SUBTLE,
+  feedbackFormNeutralDarkColor: '#373435',
+  feedbackTextBoxMinHeight: 60,
+  feedbackTextBoxMinWidth: 280,
+  feedbackTextBoxPadding: '8px 12px',
 
   // Speech recognition
   speechRecognitionContinuous: false
diff --git a/packages/component/src/Activity/ActivityFeedback.tsx b/packages/component/src/Activity/ActivityFeedback.tsx
@@ -17,12 +17,12 @@ type ActivityFeedbackProps = Readonly<{
 }>;
 
 const ROOT_STYLE = {
-  '&.webchat__feedback-form__root__container': {
+  '&.webchat__feedback-form__root-container': {
     display: 'flex',
     flexDirection: 'column',
     gap: '0.5rem'
   },
-  '&.webchat__feedback-form__root__container__child': {
+  '&.webchat__feedback-form__root-container__child': {
     display: 'flex'
   }
 };
@@ -118,8 +118,8 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
 
   if (feedbackActionsPlacement === 'activity-actions' && isFeedbackLoopSupported) {
     return (
-      <div className={classNames('webchat__feedback-form__root__container', rootClassName)}>
-        <div className={classNames('webchat__feedback-form__root__container__child', rootClassName)}>
+      <div className={classNames('webchat__feedback-form__root-container', rootClassName)}>
+        <div className={classNames('webchat__feedback-form__root-container__child', rootClassName)}>
           {FeedbackComponent}
         </div>
         {showFeedbackForm && feedbackType && FeedbackFormComponent}
diff --git a/packages/component/src/Styles/CustomPropertyNames.ts b/packages/component/src/Styles/CustomPropertyNames.ts
@@ -20,30 +20,15 @@ const CustomPropertyNames = Object.freeze({
   MinWidthMessageBubble: '--webchat__min-width--message-bubble',
   PaddingRegular: '--webchat__padding--regular',
   SizeAvatar: '--webchat__size--avatar',
-  FeedbackFormFont: '--webchat__font--primary',
-  FeedbackFormTitleColor: '--webchat__font--color-primary',
-  FeedbackFormDisclaimerColor: '--webchat__font--color-secondary',
-  FeedbackFormSubmitButtonColor: '--webchat__color--accent',
-  FeedbackFormSubmitButtonFontColor: '--webchat__button--text--primary',
-  FeedbackFormSubmitButtonBorderColor: '--webchat__button--primary-border',
-  FeedbackFormSubmitButtonFontColorOnHover: '--webchat__button--text--primary--hover',
-  FeedbackFormSubmitButtonFontColorOnDisabled: '--webchat__button--text--primary--disabled',
-  FeedbackFormSubmitButtonHoverColor: '--webchat__button--primary--hover',
-  FeedbackFormSubmitButtonActiveColor: '--webchat__button--primary--active',
-  FeedbackFormSubmitButtonDisabledColor: '--webchat__button--primary--disabled',
-  FeedbackFormCancelButtonColor: '--webchat__button--secondary',
-  FeedbackFormCancelButtonFontColor: '--webchat__button--text--secondary',
-  FeedbackFormCancelButtonBorderColor: '--webchat__button--secondary-border',
-  FeedbackFormCancelButtonHoverColor: '--webchat__button--secondary--hover',
-  FeedbackFormCancelButtonFontColorOnHover: '--webchat__button--text--secondary--hover',
-  FeedbackFormSendBoxBackgroundColor: '--webchat__textbox--background',
-  FeedbackFormSendBoxBorderColor: '--webchat__textbox--border',
-  FeedbackFormSendBoxFontColor: '--webchat__button--text--secondary',
-  FeedbackFormSendBoxFocusBorderColor: '--webchat__textbox--border--focus',
-  FeedbackFormSendBoxActiveBorderColor: '--webchat__textbox--border--selected',
-  FeedbackFormSendBoxMinHeight: '--webchat__textbox--min-height',
-  FeedbackFormSendBoxMinWidth: '--webchat__textbox--min-width',
-  FeedbackFormSendBoxPadding: '--webchat__textbox--padding'
+  FeedbackFormPrimary: '--webchat__feedback-form__primary',
+  FeedbackFormPrimarySubmitted: '--webchat__feedback-form__primary--submitted',
+  FeedbackFormLightest: '--webchat__feedback-form--lightest',
+  FeedbackFormNeutralLight: '--webchat__feedback-form--neutral-light',
+  FeedbackFormNeutralMedium: '--webchat__feedback-form--neutral-medium',
+  FeedbackFormNeutralDark: '--webchat__feedback-form--neutral-dark',
+  FeedbackFormTextBoxMinHeight: '--webchat__feedback-form__text-box--min-height',
+  FeedbackFormTextBoxMinWidth: '--webchat__feedback-form__text-box--min-width',
+  FeedbackFormTextBoxPadding: '--webchat__feedback-form__text-box--padding'
 }) satisfies Readonly<Record<string, `--webchat__${string}`>>;
 
 export default CustomPropertyNames;
diff --git a/packages/component/src/Styles/StyleSet/FeedbackForm.ts b/packages/component/src/Styles/StyleSet/FeedbackForm.ts
@@ -15,15 +15,15 @@ export default function createFeedbackFormStyle() {
       fontWeight: 400,
       fontSize: '14px',
       lineHeight: '20px',
-      color: CSSTokens.FeedbackFormTitleColor
+      color: CSSTokens.FeedbackFormNeutralDark
     },
     '&.feedback-form__caption1': {
       fontFamily: CSSTokens.FontPrimary,
       fontStyle: 'normal',
       fontWeight: 400,
       fontSize: '10px',
       lineHeight: '14px',
-      color: CSSTokens.FeedbackFormDisclaimerColor
+      color: CSSTokens.FeedbackFormNeutralMedium
     },
     '&.feedback-form__container': {
       display: 'flex',
@@ -32,43 +32,40 @@ export default function createFeedbackFormStyle() {
       paddingTop: '6px'
     },
     '&.feedback-form__button__submit': {
-      backgroundColor: CSSTokens.FeedbackFormSubmitButtonColor,
-      border: `1px solid ${CSSTokens.FeedbackFormSubmitButtonBorderColor}`,
+      backgroundColor: CSSTokens.FeedbackFormPrimary,
+      border: `1px solid ${CSSTokens.FeedbackFormPrimary}`,
       borderRadius: '4px',
-      color: CSSTokens.FeedbackFormSubmitButtonFontColor,
+      color: CSSTokens.FeedbackFormLightest,
       cursor: 'pointer',
       fontSize: '12px',
       fontFamily: CSSTokens.FontPrimary,
       height: '24px',
       padding: '0 8px'
     },
     '&.feedback-form__button__submit:hover': {
-      backgroundColor: CSSTokens.FeedbackFormSubmitButtonHoverColor,
-      border: `1px solid ${CSSTokens.FeedbackFormSubmitButtonHoverColor}`,
-      color: CSSTokens.FeedbackFormSubmitButtonFontColorOnHover
+      backgroundColor: CSSTokens.FeedbackFormPrimarySubmitted,
+      border: `1px solid ${CSSTokens.FeedbackFormPrimarySubmitted}`,
+      color: CSSTokens.FeedbackFormLightest
     },
     '&.feedback-form__button__submit:active': {
-      backgroundColor: CSSTokens.FeedbackFormSubmitButtonActiveColor
-    },
-    '&.feedback-form__button__submit:disabled': {
-      backgroundColor: CSSTokens.FeedbackFormSubmitButtonDisabledColor,
-      color: CSSTokens.FeedbackFormSubmitButtonFontColorOnDisabled,
-      cursor: 'not-allowed'
+      backgroundColor: CSSTokens.FeedbackFormPrimarySubmitted,
+      border: `1px solid ${CSSTokens.FeedbackFormPrimarySubmitted}`,
+      color: CSSTokens.FeedbackFormLightest
     },
     '&.feedback-form__button__cancel': {
-      backgroundColor: CSSTokens.FeedbackFormCancelButtonColor,
+      backgroundColor: CSSTokens.FeedbackFormLightest,
       borderRadius: '4px',
       cursor: 'pointer',
       fontSize: '12px',
-      border: `1px solid ${CSSTokens.FeedbackFormCancelButtonBorderColor}`,
-      color: CSSTokens.FeedbackFormCancelButtonFontColor,
+      border: `1px solid ${CSSTokens.FeedbackFormNeutralLight}`,
+      color: CSSTokens.FeedbackFormNeutralMedium,
       fontFamily: CSSTokens.FontPrimary,
       height: '24px',
       padding: '0 8px'
     },
     '&.feedback-form__button__cancel:hover': {
-      backgroundColor: CSSTokens.FeedbackFormCancelButtonHoverColor,
-      color: CSSTokens.FeedbackFormCancelButtonFontColorOnHover
+      backgroundColor: CSSTokens.FeedbackFormNeutralMedium,
+      color: CSSTokens.FeedbackFormLightest
     }
   };
 }
diff --git a/packages/component/src/Styles/StyleSet/FeedbackTextArea.ts b/packages/component/src/Styles/StyleSet/FeedbackTextArea.ts
@@ -7,21 +7,21 @@ export default function createFeedbackTextAreaStyle() {
       gridTemplateAreas: `'main'`,
       maxHeight: '200px',
       overflow: 'hidden',
-      backgroundColor: CSSTokens.FeedbackFormSendBoxBackgroundColor,
+      backgroundColor: CSSTokens.FeedbackFormLightest,
       borderRadius: '4px',
-      border: `1px solid ${CSSTokens.FeedbackFormSendBoxBorderColor}`,
+      border: `1px solid ${CSSTokens.FeedbackFormNeutralLight}`,
       fontFamily: CSSTokens.FontPrimary,
       fontSize: '14px',
       gap: '6px',
       lineHeight: '20px',
-      padding: CSSTokens.FeedbackFormSendBoxPadding,
+      padding: CSSTokens.FeedbackFormTextBoxPadding,
       position: 'relative',
-      minHeight: `${CSSTokens.FeedbackFormSendBoxMinHeight}`,
-      minWidth: `${CSSTokens.FeedbackFormSendBoxMinWidth}`,
+      minHeight: `${CSSTokens.FeedbackFormTextBoxMinHeight}`,
+      minWidth: `${CSSTokens.FeedbackFormTextBoxMinWidth}`,
       '&::after': {
         borderBottomLeftRadius: '4px',
         borderBottomRightRadius: '4px',
-        borderBottom: `3px solid ${CSSTokens.FeedbackFormSendBoxActiveBorderColor}`,
+        borderBottom: `3px solid ${CSSTokens.FeedbackFormNeutralLight}`,
         bottom: '-1px',
         clipPath: 'inset(calc(100% - 3px) 50% 0 50%)',
         content: '""',
@@ -32,7 +32,7 @@ export default function createFeedbackTextAreaStyle() {
         transition: 'clip-path 0 cubic-bezier(1, 0, 1, 1)'
       },
       '&:focus-within': {
-        border: `1px solid ${CSSTokens.FeedbackFormSendBoxFocusBorderColor}`
+        border: `1px solid ${CSSTokens.FeedbackFormPrimary}`
       },
       '&:focus-within::after': {
         clipPath: 'inset(calc(100% - 3px) 0 0 0)',
@@ -66,21 +66,21 @@ export default function createFeedbackTextAreaStyle() {
     '&.sendbox__text-area-input--scroll': {
       scrollbarColor: 'unset',
       scrollbarWidth: 'unset',
-      MozScrollbarColor: `${CSSTokens.FeedbackFormSubmitButtonDisabledColor} ${CSSTokens.ColorSubtle}`,
+      MozScrollbarColor: `${CSSTokens.FeedbackFormNeutralDark} ${CSSTokens.ColorSubtle}`,
       MozScrollbarWidth: 'thin',
       '&::-webkit-scrollbar': {
         width: '8px'
       },
       '&::-webkit-scrollbar-track': {
-        backgroundColor: CSSTokens.FeedbackFormSubmitButtonDisabledColor,
+        backgroundColor: CSSTokens.FeedbackFormNeutralDark,
         borderRadius: '16px'
       },
       '&::-webkit-scrollbar-thumb': {
         backgroundColor: CSSTokens.ColorSubtle,
         borderRadius: '16px'
       },
       '&::-webkit-scrollbar-corner': {
-        backgroundColor: CSSTokens.FeedbackFormSubmitButtonDisabledColor
+        backgroundColor: CSSTokens.FeedbackFormNeutralDark
       }
     }
   };
diff --git a/packages/component/src/Styles/useCustomPropertiesClassName.ts b/packages/component/src/Styles/useCustomPropertiesClassName.ts
@@ -28,28 +28,15 @@ export default function useCustomPropertiesClassName() {
       bubbleMessageMaxWidth,
       bubbleMessageMinWidth,
       bubbleMinHeight,
-      fontColorPrimary,
-      fontColorSecondary,
-      primaryButtonBackgroundColor,
-      primaryButtonFontColor,
-      primaryButtonBorderColor,
-      primaryButtonBackgroundColorOnHover,
-      primaryButtonBackgroundColorOnActive,
-      primaryButtonBackgroundColorOnDisabled,
-      primaryButtonFontColorOnDisabled,
-      primaryButtonFontColorOnHover,
-      secondaryButtonBackgroundColor,
-      secondaryButtonFontColor,
-      secondaryButtonFontColorOnHover,
-      secondaryButtonBackgroundColorOnHover,
-      secondaryButtonBorderColor,
-      textBoxBackgroundColor,
-      textBoxBorderColor,
-      textBoxBorderColorOnFocus,
-      textBoxBorderColorOnActive,
-      textBoxMinHeight,
-      textBoxMinWidth,
-      textBoxTextColor,
+      feedbackFormPrimaryColor,
+      feedbackFormPrimarySubmittedColor,
+      feedbackFormLightestColor,
+      feedbackFormNeutralLightColor,
+      feedbackFormNeutralMediumColor,
+      feedbackFormNeutralDarkColor,
+      feedbackTextBoxMinHeight,
+      feedbackTextBoxMinWidth,
+      feedbackTextBoxPadding,
       fontSizeSmall,
       markdownExternalLinkIconImage,
       paddingRegular,
@@ -82,30 +69,15 @@ export default function useCustomPropertiesClassName() {
   ${CustomPropertyNames.MinHeightImageBubble}: ${bubbleImageMinHeight}px;
   ${CustomPropertyNames.PaddingRegular}: ${paddingRegular}px;
   ${CustomPropertyNames.SizeAvatar}: ${avatarSize}px;
-  ${CustomPropertyNames.FeedbackFormFont}: ${primaryFont};
-  ${CustomPropertyNames.FeedbackFormTitleColor}: ${fontColorPrimary};
-  ${CustomPropertyNames.FeedbackFormDisclaimerColor}: ${fontColorSecondary};
-  ${CustomPropertyNames.FeedbackFormSubmitButtonColor}: ${primaryButtonBackgroundColor};
-  ${CustomPropertyNames.FeedbackFormSubmitButtonFontColor}: ${primaryButtonFontColor};
-  ${CustomPropertyNames.FeedbackFormSubmitButtonBorderColor}: ${primaryButtonBorderColor};
-  ${CustomPropertyNames.FeedbackFormSubmitButtonFontColorOnHover}: ${primaryButtonFontColorOnHover};
-  ${CustomPropertyNames.FeedbackFormSubmitButtonFontColorOnDisabled}: ${primaryButtonFontColorOnDisabled};
-  ${CustomPropertyNames.FeedbackFormSubmitButtonHoverColor}: ${primaryButtonBackgroundColorOnHover};
-  ${CustomPropertyNames.FeedbackFormSubmitButtonActiveColor}: ${primaryButtonBackgroundColorOnActive};
-  ${CustomPropertyNames.FeedbackFormSubmitButtonDisabledColor}: ${primaryButtonBackgroundColorOnDisabled};
-  ${CustomPropertyNames.FeedbackFormCancelButtonColor}: ${secondaryButtonBackgroundColor};
-  ${CustomPropertyNames.FeedbackFormCancelButtonBorderColor}: ${secondaryButtonBorderColor};
-  ${CustomPropertyNames.FeedbackFormCancelButtonFontColor}: ${secondaryButtonFontColor};
-  ${CustomPropertyNames.FeedbackFormCancelButtonFontColorOnHover}: ${secondaryButtonFontColorOnHover};
-  ${CustomPropertyNames.FeedbackFormCancelButtonHoverColor}: ${secondaryButtonBackgroundColorOnHover};
-  ${CustomPropertyNames.FeedbackFormSendBoxBackgroundColor}: ${textBoxBackgroundColor};
-  ${CustomPropertyNames.FeedbackFormSendBoxBorderColor}: ${textBoxBorderColor};
-  ${CustomPropertyNames.FeedbackFormSendBoxFontColor}: ${textBoxTextColor};
-  ${CustomPropertyNames.FeedbackFormSendBoxFocusBorderColor}: ${textBoxBorderColorOnFocus};
-  ${CustomPropertyNames.FeedbackFormSendBoxActiveBorderColor}: ${textBoxBorderColorOnActive};
-  ${CustomPropertyNames.FeedbackFormSendBoxMinHeight}: ${textBoxMinHeight}px;
-  ${CustomPropertyNames.FeedbackFormSendBoxMinWidth}: ${textBoxMinWidth}px;
-  ${CustomPropertyNames.FeedbackFormSendBoxPadding}: ${paddingRegular}px;
+  ${CustomPropertyNames.FeedbackFormPrimary}: ${feedbackFormPrimaryColor};
+  ${CustomPropertyNames.FeedbackFormPrimarySubmitted}: ${feedbackFormPrimarySubmittedColor};
+  ${CustomPropertyNames.FeedbackFormLightest}: ${feedbackFormLightestColor};
+  ${CustomPropertyNames.FeedbackFormNeutralLight}: ${feedbackFormNeutralLightColor};
+  ${CustomPropertyNames.FeedbackFormNeutralMedium}: ${feedbackFormNeutralMediumColor};
+  ${CustomPropertyNames.FeedbackFormNeutralDark}: ${feedbackFormNeutralDarkColor};
+  ${CustomPropertyNames.FeedbackFormTextBoxMinHeight}: ${feedbackTextBoxMinHeight}px;
+  ${CustomPropertyNames.FeedbackFormTextBoxMinWidth}: ${feedbackTextBoxMinWidth}px;
+  ${CustomPropertyNames.FeedbackFormTextBoxPadding}: ${feedbackTextBoxPadding};
 }
 `;
     const [style] = makeCreateStyles(contents)();
diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css
