Replace positive/negative naming for success/error (#3058)

CORL-1200

CSS_VARIABLES.md

@@ -127,7 +127,7 @@ Color palette that is used for grey shades.
 
 #### palette-error
 
-Color palette that is used for indicating something negative and is usually red.
+Color palette that is used for indicating something is error red.
 
 `--palette-error-100: #FCE5D9;  /* Before 6.3.0: --palette-error-lightest */`
 
@@ -149,7 +149,7 @@ Color palette that is used for indicating something negative and is usually red.
 
 #### palette-success
 
-Color palette that is used for indicating something positive and is usually green.
+Color palette that is used for indicating something is success green.
 
 `--palette-success-100: #D8F9D5;  /* Before 6.3.0: --palette-success-lightest */`
 

src/core/client/account/routes/download/Download/Sorry.tsx

@@ -7,7 +7,7 @@ import { CallOut } from "coral-ui/components/v3";
 const Sorry: FunctionComponent = () => {
   return (
     <CallOut
-      color="negative"
+      color="error"
       icon={<Icon>error</Icon>}
       titleWeight="semiBold"
       title={

src/core/client/account/routes/email/Confirm/Sorry.tsx

@@ -16,7 +16,7 @@ const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
         <div className={styles.title}>Oops Sorry!</div>
       </Localized>
       <CallOut
-        color="negative"
+        color="error"
         titleWeight="semiBold"
         title={
           reason ? (

src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx

@@ -16,7 +16,7 @@ const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
         <div className={styles.title}>Oops Sorry!</div>
       </Localized>
       <CallOut
-        color="negative"
+        color="error"
         titleWeight="semiBold"
         title={
           reason ? (

src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx

@@ -51,7 +51,7 @@ const UnsubscribeForm: React.FunctionComponent<Props> = ({
                   notifications.
                 </div>
               </Localized>
-              {submitError && <CallOut color="negative" title={submitError} />}
+              {submitError && <CallOut color="error" title={submitError} />}
               <Localized id="unsubscribe-submit-unsubscribe">
                 <Button
                   type="submit"

src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx

@@ -105,9 +105,7 @@ const ResetPasswordForm: React.FunctionComponent<Props> = ({
                     </FormField>
                   )}
                 </Field>
-                {submitError && (
-                  <CallOut color="negative" title={submitError} />
-                )}
+                {submitError && <CallOut color="error" title={submitError} />}
                 <Localized id="resetPassword-resetPassword">
                   <Button
                     type="submit"

src/core/client/account/routes/password/Reset/Sorry.tsx

@@ -16,7 +16,7 @@ const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
         <div className={styles.title}>Oops Sorry!</div>
       </Localized>
       <CallOut
-        color="negative"
+        color="error"
         titleWeight="semiBold"
         title={
           reason ? (

src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap

@@ -79,7 +79,7 @@ exports[`renders missing confirm token 1`] = `
             Oops Sorry!
           </div>
           <div
-            className="CallOut-root CallOut-negative CallOut-leftBorder"
+            className="CallOut-root CallOut-error CallOut-leftBorder"
           >
             <div
               className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"

src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap

@@ -137,7 +137,7 @@ exports[`renders missing reset token 1`] = `
             Oops Sorry!
           </div>
           <div
-            className="CallOut-root CallOut-negative CallOut-leftBorder"
+            className="CallOut-root CallOut-error CallOut-leftBorder"
           >
             <div
               className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"

src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap

@@ -78,7 +78,7 @@ exports[`renders missing confirm token 1`] = `
             Oops Sorry!
           </div>
           <div
-            className="CallOut-root CallOut-negative CallOut-leftBorder"
+            className="CallOut-root CallOut-error CallOut-leftBorder"
           >
             <div
               className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"

src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap

@@ -828,13 +828,13 @@ Your email address will be used to:
     className="coral coral-login-errorContainer AddEmailAddress-error"
   >
     <div
-      className="CallOut-root CallOut-negative CallOut-leftBorder coral coral-login-error"
+      className="CallOut-root CallOut-error CallOut-leftBorder coral coral-login-error"
     >
       <div
         className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
       >
         <div
-          className="CallOut-icon CallOut-negative CallOut-leftIcon"
+          className="CallOut-icon CallOut-error CallOut-leftIcon"
         >
           <i
             aria-hidden="true"

src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap

@@ -343,13 +343,13 @@ we require users to create a password.
     className="coral coral-login-errorContainer CreatePassword-error"
   >
     <div
-      className="CallOut-root CallOut-negative CallOut-leftBorder coral coral-login-error"
+      className="CallOut-root CallOut-error CallOut-leftBorder coral coral-login-error"
     >
       <div
         className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
       >
         <div
-          className="CallOut-icon CallOut-negative CallOut-leftIcon"
+          className="CallOut-icon CallOut-error CallOut-leftIcon"
         >
           <i
             aria-hidden="true"

src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap

@@ -267,13 +267,13 @@ exports[`shows server error 1`] = `
     className="coral coral-login-errorContainer CreateUsername-error"
   >
     <div
-      className="CallOut-root CallOut-negative CallOut-leftBorder coral coral-login-error"
+      className="CallOut-root CallOut-error CallOut-leftBorder coral coral-login-error"
     >
       <div
         className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
       >
         <div
-          className="CallOut-icon CallOut-negative CallOut-leftIcon"
+          className="CallOut-icon CallOut-error CallOut-leftIcon"
         >
           <i
             aria-hidden="true"

src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx

@@ -103,7 +103,7 @@ const AddEmailAddressContainer: FunctionComponent = () => {
                 <div className={cn(CLASSES.login.errorContainer, styles.error)}>
                   <CallOut
                     className={CLASSES.login.error}
-                    color="negative"
+                    color="error"
                     icon={<Icon size="sm">error</Icon>}
                     title={submitError}
                   />

src/core/client/auth/views/CreatePassword/CreatePassword.tsx

@@ -61,7 +61,7 @@ const CreatePasswordContainer: FunctionComponent = () => {
                 <div className={cn(CLASSES.login.errorContainer, styles.error)}>
                   <CallOut
                     className={CLASSES.login.error}
-                    color="negative"
+                    color="error"
                     icon={<Icon size="sm">error</Icon>}
                     title={submitError}
                   />

src/core/client/auth/views/CreateUsername/CreateUsername.tsx

@@ -61,7 +61,7 @@ const CreateUsernameContainer: FunctionComponent = () => {
                 <div className={cn(CLASSES.login.errorContainer, styles.error)}>
                   <CallOut
                     className={CLASSES.login.error}
-                    color="negative"
+                    color="error"
                     icon={<Icon size="sm">error</Icon>}
                     title={submitError}
                   />

src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx

@@ -117,7 +117,7 @@ const ForgotPasswordForm: FunctionComponent<Props> = ({
                 <div className={cn(CLASSES.login.errorContainer, styles.error)}>
                   <CallOut
                     className={CLASSES.login.error}
-                    color="negative"
+                    color="error"
                     icon={<Icon size="sm">error</Icon>}
                     title={submitError}
                   />

src/core/client/auth/views/LinkAccount/LinkAccountContainer.tsx

@@ -109,7 +109,7 @@ const LinkAccountContainer: FunctionComponent<Props> = (props) => {
                 <div className={cn(CLASSES.login.errorContainer, styles.error)}>
                   <CallOut
                     className={CLASSES.login.error}
-                    color="negative"
+                    color="error"
                     icon={<Icon size="sm">error</Icon>}
                     title={submitError}
                   />

src/core/client/auth/views/SignIn/SignIn.tsx

@@ -108,7 +108,7 @@ const SignIn: FunctionComponent<SignInForm> = ({
           <div className={CLASSES.login.errorContainer}>
             <CallOut
               className={CLASSES.login.error}
-              color="negative"
+              color="error"
               title={error}
             />
           </div>

src/core/client/auth/views/SignIn/SignInWithEmail.tsx

@@ -43,7 +43,7 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = (props) => {
           {submitError && (
             <CallOut
               className={CLASSES.login.error}
-              color="negative"
+              color="error"
               title={submitError}
             />
           )}

src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap

@@ -184,7 +184,7 @@ exports[`renders error 1`] = `
     >
       <withPropsOnChange(CallOut)
         className="coral coral-login-error"
-        color="negative"
+        color="error"
         title="Server Error"
       />
     </div>

src/core/client/auth/views/SignUp/SignUpWithEmail.tsx

@@ -29,7 +29,7 @@ const SignUp: FunctionComponent<Props> = (props) => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          {submitError && <CallOut color="negative" title={submitError} />}
+          {submitError && <CallOut color="error" title={submitError} />}
           <div className={styles.field}>
             <EmailField disabled={submitting} />
           </div>

src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx

@@ -26,7 +26,7 @@ function getMessage(
       return (
         <CallOut
           className={cn(inReviewClassName)}
-          color="negative"
+          color="error"
           icon={<Icon size="sm">error</Icon>}
           onClose={onDismiss}
           titleWeight="semiBold"

src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx

@@ -72,7 +72,7 @@ const ReportCommentFormContainer: FunctionComponent<Props> = ({
 
   return (
     <CallOut
-      color="positive"
+      color="success"
       title={
         <Localized id="comments-reportPopover-thankYou">Thank you!</Localized>
       }

src/core/client/stream/tabs/Comments/Stream/BannedInfo.tsx

@@ -9,7 +9,7 @@ import styles from "./BannedInfo.css";
 const BannedInfo: FunctionComponent = (props) => {
   return (
     <CallOut
-      color="negative"
+      color="error"
       icon={
         <Icon size="sm" className={styles.icon}>
           block

src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx

@@ -226,7 +226,7 @@ const CommentForm: FunctionComponent<Props> = (props) => {
                   {props.disabledMessage && (
                     <CallOut
                       className={CLASSES.editComment.expiredTime}
-                      color="negative"
+                      color="error"
                       title={props.disabledMessage}
                       titleWeight="semiBold"
                       icon={<Icon>error</Icon>}
@@ -258,7 +258,7 @@ const CommentForm: FunctionComponent<Props> = (props) => {
                         (error ||
                           (localSubmitError && !dirtySinceLastSubmit)) && (
                           <CallOut
-                            color="negative"
+                            color="error"
                             title={error || localSubmitError}
                             titleWeight="semiBold"
                             icon={<Icon>error</Icon>}
@@ -276,7 +276,7 @@ const CommentForm: FunctionComponent<Props> = (props) => {
               )}
               {submitError && (
                 <CallOut
-                  color="negative"
+                  color="error"
                   title={submitError}
                   titleWeight="semiBold"
                   icon={<Icon>error</Icon>}

src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx

@@ -64,7 +64,7 @@ const StreamDeletionRequestCalloutContainer: FunctionComponent<Props> = ({
     <>
       {deletionDate && (
         <CallOut
-          color="negative"
+          color="error"
           className={CLASSES.pendingAccountDeletion.$root}
           borderPosition="top"
           iconColor="inherit"

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.tsx

@@ -15,7 +15,7 @@ const PostCommentRejected: FunctionComponent<PostCommentRejectedProps> = (
   return (
     <CallOut
       className={CLASSES.createComment.rejected}
-      color="negative"
+      color="error"
       titleWeight="semiBold"
       icon={<Icon size="sm">error</Icon>}
       title={

src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.tsx

@@ -24,7 +24,7 @@ const SuspendedInfo: FunctionComponent<Props> = ({ until, organization }) => {
 
   return (
     <CallOut
-      color="negative"
+      color="error"
       iconColor="none"
       icon={
         <Icon size="sm" className={styles.icon}>

src/core/client/stream/tabs/Configure/AddMessage/AddMessageContainer.tsx

@@ -55,7 +55,7 @@ const AddMessageContainer: FunctionComponent<Props> = ({ story }) => {
         >
           {removed && (
             <CallOut
-              color="positive"
+              color="success"
               icon={<Icon size="sm">check_circle</Icon>}
               title={
                 <Localized id="config-addMessage-removed">

src/core/client/stream/tabs/Configure/AddMessage/AddMessageOpen.tsx

@@ -80,7 +80,7 @@ const AddMessageOpen: FunctionComponent<Props> = ({
       >
         {showSuccess && (
           <CallOut
-            color="positive"
+            color="success"
             icon={<Icon size="sm">check_circle</Icon>}
             title={
               <Localized id="config-addMessage-messageHasBeenAdded">
@@ -123,7 +123,7 @@ const AddMessageOpen: FunctionComponent<Props> = ({
                     CLASSES.configureCommentStream.applyButton,
                     styles.cancel
                   )}
-                  color="negative"
+                  color="error"
                   variant="outlined"
                   disabled={submitting}
                   upperCase

src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx

@@ -69,7 +69,7 @@ const ConfigureStream: FunctionComponent<Props> = ({
             {submitSucceeded && (
               <CallOut
                 className={CLASSES.configureCommentStream.successMessage}
-                color="positive"
+                color="success"
                 icon={<Icon size="sm">check_circle</Icon>}
                 title={
                   <Localized id="configure-stream-streamHasBeenUpdated">
@@ -81,7 +81,7 @@ const ConfigureStream: FunctionComponent<Props> = ({
             {submitError && (
               <CallOut
                 className={CLASSES.configureCommentStream.errorMessage}
-                color="negative"
+                color="error"
                 icon={<Icon size="sm">error</Icon>}
                 title={submitError}
               />

src/core/client/stream/tabs/Configure/LiveUpdatesConfig/LiveUpdatesConfigContainer.tsx

@@ -52,7 +52,7 @@ const renderMessages = (
     >
       {showSuccess && (
         <CallOut
-          color="positive"
+          color="success"
           icon={<Icon size="sm">check_circle</Icon>}
           title={renderSuccess(enabled)}
           onClose={onCloseSuccess}
@@ -61,7 +61,7 @@ const renderMessages = (
       )}
       {showError && (
         <CallOut
-          color="negative"
+          color="error"
           icon={<Icon size="sm">error</Icon>}
           title={error}
           onClose={onCloseError}

src/core/client/stream/tabs/Configure/OpenOrCloseStream/CloseStream.tsx

@@ -26,7 +26,7 @@ const CloseStream: FunctionComponent<Props> = ({ onClick, disableButton }) => (
     <Localized id="configure-closeStream-closeStream">
       <Button
         variant="filled"
-        color="negative"
+        color="error"
         className={CLASSES.closeCommentStream.closeButton}
         onClick={onClick}
         disabled={disableButton}

src/core/client/stream/tabs/Configure/OpenOrCloseStream/OpenOrCloseStreamContainer.tsx

@@ -56,7 +56,7 @@ const OpenOrCloseStreamContainer: FunctionComponent<Props> = ({
       >
         {showSuccess && (
           <CallOut
-            color="positive"
+            color="success"
             icon={<Icon size="sm">check_circle</Icon>}
             title={
               <Localized id="configure-openStream-theStreamIsNowClosed">
@@ -77,7 +77,7 @@ const OpenOrCloseStreamContainer: FunctionComponent<Props> = ({
       >
         {showSuccess && (
           <CallOut
-            color="positive"
+            color="success"
             icon={<Icon size="sm">check_circle</Icon>}
             title={
               <Localized id="configure-closeStream-theStreamIsNowOpen">

src/core/client/stream/tabs/Configure/Q&A/QAConfigContainer.tsx

@@ -65,7 +65,7 @@ const QAConfigContainer: FunctionComponent<Props> = ({ story, settings }) => {
       >
         {showSuccess && (
           <CallOut
-            color="positive"
+            color="success"
             icon={<Icon size="sm">check_circle</Icon>}
             titleWeight="semiBold"
             title={
@@ -88,7 +88,7 @@ const QAConfigContainer: FunctionComponent<Props> = ({ story, settings }) => {
       >
         {showSuccess && (
           <CallOut
-            color="positive"
+            color="success"
             icon={<Icon size="sm">check_circle</Icon>}
             titleWeight="semiBold"
             title={

src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx

@@ -52,7 +52,7 @@ const DeletionRequestCalloutContainer: FunctionComponent<Props> = ({
       className={cn(styles.container, CLASSES.pendingAccountDeletion.container)}
     >
       <CallOut
-        color="negative"
+        color="error"
         borderPosition="top"
         className={CLASSES.pendingAccountDeletion.$root}
         icon={

src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx

@@ -116,7 +116,7 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
       </Flex>
       {showSuccessMessage && (
         <CallOut
-          color="positive"
+          color="success"
           className={cn(
             styles.callout,
             CLASSES.downloadCommentHistory.requestLater
@@ -141,7 +141,7 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
       )}
       {showErrorMessage && (
         <CallOut
-          color="negative"
+          color="error"
           className={cn(
             styles.callout,
             CLASSES.downloadCommentHistory.requestError

src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.tsx

@@ -226,7 +226,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
                 <div className={styles.callOut}>
                   {submitError && showError && (
                     <CallOut
-                      color="negative"
+                      color="error"
                       onClose={closeError}
                       icon={<Icon size="sm">warning</Icon>}
                       titleWeight="semiBold"
@@ -235,7 +235,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
                   )}
                   {submitSucceeded && showSuccess && (
                     <CallOut
-                      color="positive"
+                      color="success"
                       onClose={closeSuccess}
                       icon={<Icon size="sm">check_circle</Icon>}
                       titleWeight="semiBold"

src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.tsx

@@ -293,7 +293,7 @@ const changeEmailContainer: FunctionComponent<Props> = ({
       {showSuccessMessage && (
         <div className={styles.successMessage}>
           <CallOut
-            color="positive"
+            color="success"
             onClose={onCloseSuccess}
             icon={<Icon size="sm">check_circle</Icon>}
             titleWeight="semiBold"
@@ -408,7 +408,7 @@ const changeEmailContainer: FunctionComponent<Props> = ({
                   {submitError && (
                     <CallOut
                       className={CLASSES.myEmail.form.errorMessage}
-                      color="negative"
+                      color="error"
                       icon={<Icon size="sm">error</Icon>}
                       titleWeight="semiBold"
                       title={<span>{submitError}</span>}

src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx

@@ -115,7 +115,7 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
           )}
         >
           <CallOut
-            color="positive"
+            color="success"
             onClose={onCloseSuccess}
             className={CLASSES.myPassword.form.successMessage}
             icon={<Icon size="sm">check_circle</Icon>}
@@ -207,7 +207,7 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
                     </Field>
                     {submitError && (
                       <CallOut
-                        color="negative"
+                        color="error"
                         className={CLASSES.myPassword.form.errorMessage}
                         icon={<Icon size="sm">error</Icon>}
                         titleWeight="semiBold"

src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx

@@ -201,7 +201,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
           )}
         >
           <CallOut
-            color="positive"
+            color="success"
             onClose={closeSuccessMessage}
             className={cn(CLASSES.myUsername.form.successCallOut)}
             icon={<Icon size="sm">check_circle</Icon>}
@@ -328,7 +328,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                     </FormField>
                     {submitError && (
                       <CallOut
-                        color="negative"
+                        color="error"
                         className={CLASSES.myUsername.form.errorMessage}
                         icon={<Icon size="sm">error</Icon>}
                         titleWeight="semiBold"

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx

@@ -116,7 +116,7 @@ const DeleteAccountContainer: FunctionComponent<Props> = ({
         {!deletionDate && (
           <Localized id="profile-account-deleteAccount-request">
             <Button
-              color="negative"
+              color="error"
               variant="filled"
               className={cn(
                 styles.requestButton,

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx

@@ -225,7 +225,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
 
                 {submitError && (
                   <CallOut
-                    color="negative"
+                    color="error"
                     icon={<Icon size="sm">error</Icon>}
                     titleWeight="semiBold"
                     title={submitError}

src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap

@@ -1911,13 +1911,13 @@ exports[`shows expiry message: edit time expired 1`] = `
             </div>
           </div>
           <div
-            className="CallOut-root CallOut-negative CallOut-leftBorder coral coral-editComment-expiredTime"
+            className="CallOut-root CallOut-error CallOut-leftBorder coral coral-editComment-expiredTime"
           >
             <div
               className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
             >
               <div
-                className="CallOut-icon CallOut-negative CallOut-leftIcon"
+                className="CallOut-icon CallOut-error CallOut-leftIcon"
               >
                 <i
                   aria-hidden="true"

src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap

@@ -700,13 +700,13 @@ exports[`report comment as offensive 1`] = `
       </div>
     </div>
     <div
-      className="CallOut-root CallOut-positive CallOut-leftBorder"
+      className="CallOut-root CallOut-success CallOut-leftBorder"
     >
       <div
         className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
       >
         <div
-          className="CallOut-icon CallOut-positive CallOut-leftIcon"
+          className="CallOut-icon CallOut-success CallOut-leftIcon"
         >
           <i
             aria-hidden="true"

src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap

@@ -260,7 +260,7 @@ no new comments may be submitted and all previously submitted comments
 will still be displayed.
       </div>
       <button
-        className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorNegative Button-upperCase coral coral-closeCommentStream-closeButton"
+        className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorError Button-upperCase coral coral-closeCommentStream-closeButton"
         data-variant="filled"
         disabled={false}
         onBlur={[Function]}

src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap

@@ -200,7 +200,7 @@ all your comments from this site.
           </div>
         </div>
         <button
-          className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorNegative Button-upperCase DeleteAccountContainer-requestButton coral coral-deleteMyAccount-requestButton"
+          className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorError Button-upperCase DeleteAccountContainer-requestButton coral coral-deleteMyAccount-requestButton"
           data-testid="deleteAccount-request"
           data-variant="filled"
           disabled={false}

src/core/client/ui/components/v3/Button/Button.css

@@ -150,7 +150,7 @@
     }
   }
 
-  &.colorNegative {
+  &.colorError {
     color: var(--palette-text-000);
 
     &:not(.disabled),
@@ -174,7 +174,7 @@
     }
   }
 
-  &.colorPositive {
+  &.colorSuccess {
     color: var(--palette-text-000);
 
     &:not(.disabled),
@@ -256,7 +256,7 @@
     }
   }
 
-  &.colorNegative {
+  &.colorError {
     border-style: solid;
     border-width: 1px;
 
@@ -284,7 +284,7 @@
     }
   }
 
-  &.colorPositive {
+  &.colorSuccess {
     border-style: solid;
     border-width: 1px;
 
@@ -350,7 +350,7 @@
     }
   }
 
-  &.colorNegative {
+  &.colorError {
     &:not(.disabled),
     &:not(:disabled) {
       color: var(--palette-error-500);
@@ -367,7 +367,7 @@
     }
   }
 
-  &.colorPositive{
+  &.colorSuccess{
     &:not(.disabled),
     &:not(:disabled) {
       color: var(--palette-success-500);

src/core/client/ui/components/v3/Button/Button.tsx

@@ -22,7 +22,7 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
   fontSize?: "extraSmall" | "small" | "medium" | "large" | "none";
   textAlign?: "left" | "center" | "right";
   paddingSize?: "extraSmall" | "small" | "medium" | "large" | "none";
-  color?: "primary" | "secondary" | "positive" | "negative" | "none";
+  color?: "primary" | "secondary" | "success" | "error" | "none";
   variant?: "filled" | "outlined" | "flat" | "none";
 
   active?: boolean;
@@ -94,8 +94,8 @@ export class Button extends React.Component<Props> {
         [classes.paddingSizeLarge]: paddingSize === "large",
         [classes.colorPrimary]: color === "primary",
         [classes.colorSecondary]: color === "secondary",
-        [classes.colorPositive]: color === "positive",
-        [classes.colorNegative]: color === "negative",
+        [classes.colorSuccess]: color === "success",
+        [classes.colorError]: color === "error",
         [classes.disabled]: disabled,
         [classes.upperCase]: upperCase,
         [classes.underline]: underline,

src/core/client/ui/components/v3/CallOut/CallOut.css

@@ -59,10 +59,10 @@
   &.mono {
     color: var(--palette-text-500);
   }
-  &.positive {
+  &.success {
     color: var(--palette-success-500);
   }
-  &.negative {
+  &.error {
     color: var(--palette-error-500);
   }
   &.primary {
@@ -79,13 +79,13 @@
   color: var(--palette-text-500);
 }
 
-.positive {
+.success {
   background-color: var(--palette-success-100);
   border-color: var(--palette-success-500);
   color: var(--palette-text-500);
 }
 
-.negative {
+.error {
   background-color: $colors-stream-red-100;
   border-color: $colors-stream-red-500;
   color: var(--palette-text-500);

src/core/client/ui/components/v3/CallOut/CallOut.tsx

@@ -8,8 +8,8 @@ import styles from "./CallOut.css";
 
 type CallOutColor =
   | "mono"
-  | "positive"
-  | "negative"
+  | "success"
+  | "error"
   | "primary"
   | "warning"
   | "none";
@@ -54,8 +54,8 @@ const CallOut: FunctionComponent<Props> = ({
     classes.root,
     {
       [classes.mono]: color === "mono",
-      [classes.positive]: color === "positive",
-      [classes.negative]: color === "negative",
+      [classes.success]: color === "success",
+      [classes.error]: color === "error",
       [classes.primary]: color === "primary",
       [classes.warning]: color === "warning",
       [classes.leftBorder]: borderPosition === "leftSide",
@@ -66,8 +66,8 @@ const CallOut: FunctionComponent<Props> = ({
 
   const iconClasses = cn(classes.icon, {
     [classes.mono]: color === "mono" && iconColor === "inherit",
-    [classes.positive]: color === "positive" && iconColor === "inherit",
-    [classes.negative]: color === "negative" && iconColor === "inherit",
+    [classes.success]: color === "success" && iconColor === "inherit",
+    [classes.error]: color === "error" && iconColor === "inherit",
     [classes.primary]: color === "primary" && iconColor === "inherit",
     [classes.warning]: color === "warning" && iconColor === "inherit",
     [classes.leftIcon]: iconPosition === "left",

src/core/client/ui/theme/sharedVariables.ts

@@ -40,7 +40,7 @@ const variables = {
       800: compat(colors.grey800, "palette-grey-darkest"),
       900: compat(colors.grey900, "palette-grey-darkest"),
     },
-    /** Color palette that is used for indicating something negative and is usually red. */
+    /** Color palette that is used for indicating something is error red. */
     error: {
       100: compat(colors.red100, "palette-error-lightest"),
       200: compat(colors.red200, "palette-error-lighter"),
@@ -52,7 +52,7 @@ const variables = {
       800: compat(colors.red800, "palette-error-darkest"),
       900: compat(colors.red900, "palette-error-darkest"),
     },
-    /** Color palette that is used for indicating something positive and is usually green. */
+    /** Color palette that is used for indicating something is success green. */
     success: {
       100: compat(colors.green100, "palette-success-lightest"),
       200: compat(colors.green200, "palette-success-lighter"),