From 6966bb8d12a50e9b9973546e4ec1edfaae79fa65 Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Fri, 31 Jul 2020 09:40:48 -0600
Subject: [PATCH] Replace positive/negative naming for success/error (#3058)

CORL-1200
---
 CSS_VARIABLES.md                                     |  4 ++--
 .../account/routes/download/Download/Sorry.tsx       |  2 +-
 .../client/account/routes/email/Confirm/Sorry.tsx    |  2 +-
 .../routes/notifications/Unsubscribe/Sorry.tsx       |  2 +-
 .../notifications/Unsubscribe/UnsubscribeForm.tsx    |  2 +-
 .../routes/password/Reset/ResetPasswordForm.tsx      |  4 +---
 .../client/account/routes/password/Reset/Sorry.tsx   |  2 +-
 .../test/__snapshots__/confirmEmail.spec.tsx.snap    |  2 +-
 .../test/__snapshots__/resetPassword.spec.tsx.snap   |  2 +-
 .../unsubscribeNotifications.spec.tsx.snap           |  2 +-
 .../test/__snapshots__/addEmailAddress.spec.tsx.snap |  4 ++--
 .../test/__snapshots__/createPassword.spec.tsx.snap  |  4 ++--
 .../test/__snapshots__/createUsername.spec.tsx.snap  |  4 ++--
 .../auth/views/AddEmailAddress/AddEmailAddress.tsx   |  2 +-
 .../auth/views/CreatePassword/CreatePassword.tsx     |  2 +-
 .../auth/views/CreateUsername/CreateUsername.tsx     |  2 +-
 .../auth/views/ForgotPassword/ForgotPasswordForm.tsx |  2 +-
 .../auth/views/LinkAccount/LinkAccountContainer.tsx  |  2 +-
 src/core/client/auth/views/SignIn/SignIn.tsx         |  2 +-
 .../client/auth/views/SignIn/SignInWithEmail.tsx     |  2 +-
 .../views/SignIn/__snapshots__/SignIn.spec.tsx.snap  |  2 +-
 .../client/auth/views/SignUp/SignUpWithEmail.tsx     |  2 +-
 .../tabs/Comments/Comment/ReplyEditSubmitStatus.tsx  |  2 +-
 .../ReportFlow/ReportCommentFormContainer.tsx        |  2 +-
 .../stream/tabs/Comments/Stream/BannedInfo.tsx       |  2 +-
 .../tabs/Comments/Stream/CommentForm/CommentForm.tsx |  6 +++---
 .../StreamDeletionRequestCalloutContainer.tsx        |  2 +-
 .../PostCommentForm/PostCommentRejectedMessage.tsx   |  2 +-
 .../Comments/Stream/SuspendedInfo/SuspendedInfo.tsx  |  2 +-
 .../Configure/AddMessage/AddMessageContainer.tsx     |  2 +-
 .../tabs/Configure/AddMessage/AddMessageOpen.tsx     |  4 ++--
 .../Configure/ConfigureStream/ConfigureStream.tsx    |  4 ++--
 .../LiveUpdatesConfig/LiveUpdatesConfigContainer.tsx |  4 ++--
 .../tabs/Configure/OpenOrCloseStream/CloseStream.tsx |  2 +-
 .../OpenOrCloseStream/OpenOrCloseStreamContainer.tsx |  4 ++--
 .../stream/tabs/Configure/Q&A/QAConfigContainer.tsx  |  4 ++--
 .../DeletionRequestCalloutContainer.tsx              |  2 +-
 .../Profile/MyComments/DownloadCommentsContainer.tsx |  4 ++--
 .../Preferences/NotificationSettingsContainer.tsx    |  4 ++--
 .../Settings/ChangeEmail/ChangeEmailContainer.tsx    |  4 ++--
 .../stream/tabs/Profile/Settings/ChangePassword.tsx  |  4 ++--
 .../ChangeUsername/ChangeUsernameContainer.tsx       |  4 ++--
 .../DeleteAccount/DeleteAccountContainer.tsx         |  2 +-
 .../Settings/DeleteAccount/Pages/ConfirmPage.tsx     |  2 +-
 .../stream/__snapshots__/editComment.spec.tsx.snap   |  4 ++--
 .../stream/__snapshots__/reportComment.spec.tsx.snap |  4 ++--
 .../__snapshots__/renderConfigure.spec.tsx.snap      |  2 +-
 .../test/profile/__snapshots__/account.spec.tsx.snap |  2 +-
 src/core/client/ui/components/v3/Button/Button.css   | 12 ++++++------
 src/core/client/ui/components/v3/Button/Button.tsx   |  6 +++---
 src/core/client/ui/components/v3/CallOut/CallOut.css |  8 ++++----
 src/core/client/ui/components/v3/CallOut/CallOut.tsx | 12 ++++++------
 src/core/client/ui/theme/sharedVariables.ts          |  4 ++--
 53 files changed, 87 insertions(+), 89 deletions(-)

diff --git a/CSS_VARIABLES.md b/CSS_VARIABLES.md
index 49cee7268..a4880285d 100644
--- a/CSS_VARIABLES.md
+++ b/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 */`
 
diff --git a/src/core/client/account/routes/download/Download/Sorry.tsx b/src/core/client/account/routes/download/Download/Sorry.tsx
index 826aa3f46..928e53162 100644
--- a/src/core/client/account/routes/download/Download/Sorry.tsx
+++ b/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={
diff --git a/src/core/client/account/routes/email/Confirm/Sorry.tsx b/src/core/client/account/routes/email/Confirm/Sorry.tsx
index af24f038e..3d4c5b165 100644
--- a/src/core/client/account/routes/email/Confirm/Sorry.tsx
+++ b/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 ? (
diff --git a/src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx b/src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx
index dfa4c2fda..8fe60465b 100644
--- a/src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx
+++ b/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 ? (
diff --git a/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx b/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx
index 075033c8d..8b4b3fbd4 100644
--- a/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx
+++ b/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"
diff --git a/src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx b/src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx
index 047c29057..0e8626260 100644
--- a/src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx
+++ b/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"
diff --git a/src/core/client/account/routes/password/Reset/Sorry.tsx b/src/core/client/account/routes/password/Reset/Sorry.tsx
index f813501aa..3b6930889 100644
--- a/src/core/client/account/routes/password/Reset/Sorry.tsx
+++ b/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 ? (
diff --git a/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap b/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
index 2d2c387e4..3e619ae21 100644
--- a/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
+++ b/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"
diff --git a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
index d7904c716..c213603a1 100644
--- a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+++ b/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"
diff --git a/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap b/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap
index 5cf99edab..1b25035e8 100644
--- a/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap
+++ b/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"
diff --git a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
index eacce9532..254a5cc30 100644
--- a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+++ b/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"
diff --git a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
index a6d4df488..5cfd4fd4a 100644
--- a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+++ b/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"
diff --git a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
index af1116b37..3d2f86741 100644
--- a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
+++ b/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"
diff --git a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx
index 428e84ce2..3cd4e358f 100644
--- a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx
+++ b/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}
                   />
diff --git a/src/core/client/auth/views/CreatePassword/CreatePassword.tsx b/src/core/client/auth/views/CreatePassword/CreatePassword.tsx
index 76415ebb4..897061893 100644
--- a/src/core/client/auth/views/CreatePassword/CreatePassword.tsx
+++ b/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}
                   />
diff --git a/src/core/client/auth/views/CreateUsername/CreateUsername.tsx b/src/core/client/auth/views/CreateUsername/CreateUsername.tsx
index 5248218f1..3d61fa6f1 100644
--- a/src/core/client/auth/views/CreateUsername/CreateUsername.tsx
+++ b/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}
                   />
diff --git a/src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx b/src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx
index 9708f93c7..10b34a051 100644
--- a/src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx
+++ b/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}
                   />
diff --git a/src/core/client/auth/views/LinkAccount/LinkAccountContainer.tsx b/src/core/client/auth/views/LinkAccount/LinkAccountContainer.tsx
index 6f82baa6a..bca6c32ed 100644
--- a/src/core/client/auth/views/LinkAccount/LinkAccountContainer.tsx
+++ b/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}
                   />
diff --git a/src/core/client/auth/views/SignIn/SignIn.tsx b/src/core/client/auth/views/SignIn/SignIn.tsx
index e384dba09..d452a25fc 100644
--- a/src/core/client/auth/views/SignIn/SignIn.tsx
+++ b/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>
diff --git a/src/core/client/auth/views/SignIn/SignInWithEmail.tsx b/src/core/client/auth/views/SignIn/SignInWithEmail.tsx
index 9c72db1c7..70eabc92c 100644
--- a/src/core/client/auth/views/SignIn/SignInWithEmail.tsx
+++ b/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}
             />
           )}
diff --git a/src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap b/src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap
index 34cff8050..01b4e1005 100644
--- a/src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap
+++ b/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>
diff --git a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx b/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx
index 6e2d9eda1..9eebda87f 100644
--- a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx
+++ b/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>
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx
index 05e9ef822..26bedcd13 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx
+++ b/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"
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx
index fa7edf330..66172a9c3 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx
+++ b/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>
       }
diff --git a/src/core/client/stream/tabs/Comments/Stream/BannedInfo.tsx b/src/core/client/stream/tabs/Comments/Stream/BannedInfo.tsx
index b248c2ac3..30d63de25 100644
--- a/src/core/client/stream/tabs/Comments/Stream/BannedInfo.tsx
+++ b/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
diff --git a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx b/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
index efdaf2afd..5c47a29d2 100644
--- a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
+++ b/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>}
diff --git a/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx
index 0989c754f..a45f78151 100644
--- a/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx
+++ b/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"
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.tsx
index ebe1e1a51..de37e9f93 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.tsx
+++ b/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={
diff --git a/src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.tsx b/src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.tsx
index 946f01d28..f54ca5bcd 100644
--- a/src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.tsx
+++ b/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}>
diff --git a/src/core/client/stream/tabs/Configure/AddMessage/AddMessageContainer.tsx b/src/core/client/stream/tabs/Configure/AddMessage/AddMessageContainer.tsx
index e95e44e0e..9080fd682 100644
--- a/src/core/client/stream/tabs/Configure/AddMessage/AddMessageContainer.tsx
+++ b/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">
diff --git a/src/core/client/stream/tabs/Configure/AddMessage/AddMessageOpen.tsx b/src/core/client/stream/tabs/Configure/AddMessage/AddMessageOpen.tsx
index 499f2e963..3c5cd463f 100644
--- a/src/core/client/stream/tabs/Configure/AddMessage/AddMessageOpen.tsx
+++ b/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
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx b/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx
index f7b1cfee3..dea908861 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx
+++ b/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}
               />
diff --git a/src/core/client/stream/tabs/Configure/LiveUpdatesConfig/LiveUpdatesConfigContainer.tsx b/src/core/client/stream/tabs/Configure/LiveUpdatesConfig/LiveUpdatesConfigContainer.tsx
index 534a700a8..776aed141 100644
--- a/src/core/client/stream/tabs/Configure/LiveUpdatesConfig/LiveUpdatesConfigContainer.tsx
+++ b/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}
diff --git a/src/core/client/stream/tabs/Configure/OpenOrCloseStream/CloseStream.tsx b/src/core/client/stream/tabs/Configure/OpenOrCloseStream/CloseStream.tsx
index 58466f21a..37df0c9c1 100644
--- a/src/core/client/stream/tabs/Configure/OpenOrCloseStream/CloseStream.tsx
+++ b/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}
diff --git a/src/core/client/stream/tabs/Configure/OpenOrCloseStream/OpenOrCloseStreamContainer.tsx b/src/core/client/stream/tabs/Configure/OpenOrCloseStream/OpenOrCloseStreamContainer.tsx
index 9fe58a733..88e24fa03 100644
--- a/src/core/client/stream/tabs/Configure/OpenOrCloseStream/OpenOrCloseStreamContainer.tsx
+++ b/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">
diff --git a/src/core/client/stream/tabs/Configure/Q&A/QAConfigContainer.tsx b/src/core/client/stream/tabs/Configure/Q&A/QAConfigContainer.tsx
index 61937124c..a0bd8735a 100644
--- a/src/core/client/stream/tabs/Configure/Q&A/QAConfigContainer.tsx
+++ b/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={
diff --git a/src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx b/src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx
index 73e3a8723..9e2e7aa54 100644
--- a/src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx
+++ b/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={
diff --git a/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx b/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx
index 0151c2b4f..3e87059a5 100644
--- a/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx
+++ b/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
diff --git a/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.tsx b/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.tsx
index db849c579..03700f585 100644
--- a/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.tsx
+++ b/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"
diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.tsx
index bfc01439e..58361ebfa 100644
--- a/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.tsx
+++ b/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>}
diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx
index 8d0420884..6d5197b77 100644
--- a/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx
+++ b/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"
diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx
index 4718ca429..438ed0540 100644
--- a/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx
+++ b/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"
diff --git a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx
index c374c5b50..45fe6359b 100644
--- a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx
+++ b/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,
diff --git a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx
index fed05bfe2..524ab1006 100644
--- a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx
+++ b/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}
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
index 8f1f579ea..4dce3d276 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+++ b/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"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap
index 497fb3d5e..4a977d98a 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap
+++ b/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"
diff --git a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap b/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
index 59c049c23..cc9d28056 100644
--- a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
+++ b/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]}
diff --git a/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
index fd1a44ab1..64e5bd586 100644
--- a/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
+++ b/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}
diff --git a/src/core/client/ui/components/v3/Button/Button.css b/src/core/client/ui/components/v3/Button/Button.css
index e34283c18..8cf24d6bc 100644
--- a/src/core/client/ui/components/v3/Button/Button.css
+++ b/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);
diff --git a/src/core/client/ui/components/v3/Button/Button.tsx b/src/core/client/ui/components/v3/Button/Button.tsx
index ab64d7746..524220002 100644
--- a/src/core/client/ui/components/v3/Button/Button.tsx
+++ b/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,
diff --git a/src/core/client/ui/components/v3/CallOut/CallOut.css b/src/core/client/ui/components/v3/CallOut/CallOut.css
index 8fabde6f8..362ad1574 100644
--- a/src/core/client/ui/components/v3/CallOut/CallOut.css
+++ b/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);
diff --git a/src/core/client/ui/components/v3/CallOut/CallOut.tsx b/src/core/client/ui/components/v3/CallOut/CallOut.tsx
index 5762610db..b0bfe42b5 100644
--- a/src/core/client/ui/components/v3/CallOut/CallOut.tsx
+++ b/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",
diff --git a/src/core/client/ui/theme/sharedVariables.ts b/src/core/client/ui/theme/sharedVariables.ts
index 9dc1adf00..9c823d40f 100644
--- a/src/core/client/ui/theme/sharedVariables.ts
+++ b/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"),