Migrate accent3 to JS colors (#24002)

frontend/src/metabase/css/core/colors.css

@@ -6,7 +6,6 @@
   --color-brand-light: #ddecfa;
   --color-accent1: #88bf4d;
   --color-accent2: #a989c5;
-  --color-accent3: #ef8c8c;
   --color-accent4: #f9d45c;
   --color-accent5: #f2a86f;
   --color-accent6: #98d9d9;

frontend/src/metabase/css/pulse.css

@@ -59,25 +59,6 @@
   box-shadow: 0 0 3px var(--color-shadow);
 }
 
-.DangerZone:hover {
-  border-color: var(--color-accent3);
-  transition: border 0.3s ease-in;
-}
-
-.DangerZone .Button--danger {
-  opacity: 0.4;
-  background: var(--color-bg-light);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-dark);
-}
-
-.DangerZone:hover .Button--danger {
-  opacity: 1;
-  background-color: var(--color-accent3);
-  border-color: var(--color-accent3);
-  color: var(--color-text-white);
-}
-
 .Modal.WhatsAPulseModal {
   width: auto;
 }

frontend/src/metabase/query_builder/components/AlertModals.jsx

@@ -15,7 +15,7 @@ import Icon from "metabase/components/Icon";
 import ChannelSetupModal from "metabase/components/ChannelSetupModal";
 import ButtonWithStatus from "metabase/components/ButtonWithStatus";
 import PulseEditChannels from "metabase/pulse/components/PulseEditChannels";
-import { AlertModalFooter } from "./AlertModals.styled";
+import { AlertModalFooter, DangerZone } from "./AlertModals.styled";
 
 import User from "metabase/entities/users";
 
@@ -393,7 +393,7 @@ export class DeleteAlertSection extends Component {
     const { onDeleteAlert } = this.props;
 
     return (
-      <div className="DangerZone mt4 pt4 mb2 p3 rounded bordered relative">
+      <DangerZone className="DangerZone mt4 pt4 mb2 p3 rounded bordered relative">
         <h3
           className="text-error absolute top bg-white px1"
           style={{ marginTop: "-12px" }}
@@ -404,8 +404,9 @@ export class DeleteAlertSection extends Component {
             <p className="h4 pr2">{jt`Stop delivery and delete this alert. There's no undo, so be careful.`}</p>
             <ModalWithTrigger
               ref={ref => (this.deleteModal = ref)}
-              triggerClasses="Button Button--danger flex-align-right flex-no-shrink"
-              triggerElement="Delete this Alert"
+              as={Button}
+              triggerClasses="Button--danger flex-align-right flex-no-shrink"
+              triggerElement={t`Delete this Alert`}
             >
               <DeleteModalWithConfirm
                 objectType="alert"
@@ -417,7 +418,7 @@ export class DeleteAlertSection extends Component {
             </ModalWithTrigger>
           </div>
         </div>
-      </div>
+      </DangerZone>
     );
   }
 }

frontend/src/metabase/query_builder/components/AlertModals.styled.jsx

 import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
+import Button from "metabase/core/components/Button";
 
 export const AlertModalFooter = styled.div`
   display: flex;
@@ -7,3 +9,25 @@ export const AlertModalFooter = styled.div`
   align-items: center;
   margin-top: ${space(3)};
 `;
+
+export const DangerZone = styled.div`
+  ${Button.Root} {
+    opacity: 0.4;
+    background: ${color("bg-light")};
+    border: 1px solid ${color("border")};
+    color: ${color("text-dark")};
+    transition: none;
+  }
+
+  &:hover {
+    border-color: ${color("accent3")};
+    transition: border 0.3s ease-in;
+
+    ${Button.Root} {
+      opacity: 1;
+      background-color: ${color("accent3")};
+      border-color: ${color("accent3")};
+      color: ${color("text-white")};
+    }
+  }
+`;