From 42e6089e3ccf7acf16ee8eaa496f6e839c95418b Mon Sep 17 00:00:00 2001
From: nathanyoung <1447339+nathanyoung@users.noreply.github.com>
Date: Thu, 13 Jun 2024 09:23:21 -0700
Subject: [PATCH 1/3] feat: Modal dark mode

---
 src/components/Modal/Modal.Overview.stories.mdx  |  6 +++---
 .../Modal/Modal.VisualTests.stories.jsx          | 10 +++++-----
 src/components/Modal/Modal.module.scss           | 16 ++++++----------
 src/components/Modal/Modal.test.tsx              |  4 ++--
 .../Modal/components/ModalFooter/ModalFooter.tsx |  2 +-
 .../Modal/components/ModalHeader/ModalHeader.tsx |  4 ++--
 6 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/components/Modal/Modal.Overview.stories.mdx b/src/components/Modal/Modal.Overview.stories.mdx
index 1ef6ad76a..b69fec650 100644
--- a/src/components/Modal/Modal.Overview.stories.mdx
+++ b/src/components/Modal/Modal.Overview.stories.mdx
@@ -58,7 +58,7 @@ In order to hide or show the Modal, set the Modal's `isOpen` prop to `true` or `
             />
             <Modal.Body>Modal content</Modal.Body>
             <Modal.Footer>
-              <Button variant="primary" tone="neutral" onClick={closeModal}>
+              <Button variant="secondary" tone="neutral" onClick={closeModal}>
                 Cancel
               </Button>
               <Button variant="primary">Primary Action</Button>
@@ -192,7 +192,7 @@ Omit `<Modal.Header/>` to render a minimal modal without a header.
           >
             <Modal.Body>Modal content</Modal.Body>
             <Modal.Footer>
-              <Button variant="primary" tone="neutral" onClick={closeModal}>
+              <Button variant="secondary" tone="neutral" onClick={closeModal}>
                 Cancel
               </Button>
               <Button variant="primary">Primary Action</Button>
@@ -239,7 +239,7 @@ Use `fullScreenMobile` to enable fullscreen at mobile viewport widths.
             />
             <Modal.Body>Modal content</Modal.Body>
             <Modal.Footer>
-              <Button variant="primary" tone="neutral" onClick={closeModal}>
+              <Button variant="secondary" tone="neutral" onClick={closeModal}>
                 Cancel
               </Button>
               <Button variant="primary">Primary Action</Button>
diff --git a/src/components/Modal/Modal.VisualTests.stories.jsx b/src/components/Modal/Modal.VisualTests.stories.jsx
index df2cdb219..0725be624 100644
--- a/src/components/Modal/Modal.VisualTests.stories.jsx
+++ b/src/components/Modal/Modal.VisualTests.stories.jsx
@@ -31,7 +31,7 @@ export const BasicExample = () => (
     <Modal.Header id="title" title="The Modal Title" onDismiss={() => null} />
     <Modal.Body>Modal content</Modal.Body>
     <Modal.Footer>
-      <Button variant="primary" tone="neutral" onClick={() => null}>
+      <Button variant="secondary" tone="neutral" onClick={() => null}>
         Cancel
       </Button>
       <Button variant="primary">Primary Action</Button>
@@ -58,7 +58,7 @@ export const WithoutHeader = () => (
   <Modal ariaLabel="modal without header" isOpen onDismiss={() => null}>
     <Modal.Body>Modal content</Modal.Body>
     <Modal.Footer>
-      <Button variant="primary" tone="neutral" onClick={() => null}>
+      <Button variant="secondary" tone="neutral" onClick={() => null}>
         Cancel
       </Button>
       <Button variant="primary">Primary Action</Button>
@@ -75,7 +75,7 @@ export const FullScreenOnMobile = () => (
     />
     <Modal.Body>Modal content</Modal.Body>
     <Modal.Footer>
-      <Button variant="primary" tone="neutral" onClick={() => null}>
+      <Button variant="secondary" tone="neutral" onClick={() => null}>
         Cancel
       </Button>
       <Button variant="primary">Primary Action</Button>
@@ -92,7 +92,7 @@ export const WithMaxWidth = () => (
     />
     <Modal.Body>Modal content</Modal.Body>
     <Modal.Footer>
-      <Button variant="primary" tone="neutral" onClick={() => null}>
+      <Button variant="secondary" tone="neutral" onClick={() => null}>
         Cancel
       </Button>
       <Button variant="primary">Primary Action</Button>
@@ -114,7 +114,7 @@ export const WithResponsiveMaxWidth = () => (
     />
     <Modal.Body>Modal content</Modal.Body>
     <Modal.Footer>
-      <Button variant="primary" tone="neutral" onClick={() => null}>
+      <Button variant="secondary" tone="neutral" onClick={() => null}>
         Cancel
       </Button>
       <Button variant="primary">Primary Action</Button>
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index 8e94ea778..0d6e21501 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -10,21 +10,18 @@
   background: transparent;
   cursor: pointer;
   padding: var(--size-spacing-xs);
-  color: var(--modal-close-button-color, var(--color-brand-grey-500));
+  color: var(--color-text-body-primary);
   line-height: var(--size-line-height-base);
   border-radius: var(--size-border-radius-sm);
 
   &:hover {
-    color: var(--modal-close-button-color-hover, var(--color-brand-grey-600));
+    color: var(--color-text-contrast);
   }
 
   // Show focus styles on keyboard focus.
   &:focus-visible {
     outline: 0;
-    box-shadow: var(
-      --modal-close-button-box-shadow-focus,
-      0 0 0 4px var(--color-brand-grey-200)
-    );
+    box-shadow: 0 0 0 4px var(--color-brand-grey-200);
   }
 
   // Hide focus styles if they are not needed, for example,
@@ -78,6 +75,8 @@
   }
 
   [data-reach-dialog-content] {
+    color: var(--color-text-body-primary);
+    font-family: var(--asset-fonts-body);
     display: flex;
     position: absolute;
     bottom: 0;
@@ -86,10 +85,7 @@
     grid-column: 1;
     z-index: var(--size-z-index-modal);
     margin: 0;
-    background-color: var(
-      --modal-background-color,
-      var(--color-brand-white-500)
-    );
+    background-color: var(--color-background-primary);
     padding: 0;
     width: 100%;
     border-radius: var(--modal-border-radius, var(--size-border-radius-md))
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index d5b8ae19c..17b583b6f 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -47,7 +47,7 @@ describe('Modal', () => {
 
   test('onDismiss', async () => {
     const mockOnDismiss = jest.fn();
-    const { getByTestId } = render(
+    const { getByLabelText } = render(
       <Modal isOpen onDismiss={mockOnDismiss} ariaLabel="testSubcomponents">
         <Modal.Header id="titleFooterBody" title="The Modal Title" onDismiss={mockOnDismiss} />
         <Modal.Body>Modal body content</Modal.Body>
@@ -55,7 +55,7 @@ describe('Modal', () => {
       </Modal>,
     );
 
-    const closeButton = getByTestId('icon-testid--remove').closest('button');
+    const closeButton = getByLabelText('close');
     expect(closeButton).toBeInTheDocument();
 
     if (closeButton) {
diff --git a/src/components/Modal/components/ModalFooter/ModalFooter.tsx b/src/components/Modal/components/ModalFooter/ModalFooter.tsx
index 7c6802702..c4b15ebdf 100644
--- a/src/components/Modal/components/ModalFooter/ModalFooter.tsx
+++ b/src/components/Modal/components/ModalFooter/ModalFooter.tsx
@@ -21,11 +21,11 @@ export const ModalFooter: FC<ModalFooterProps> = ({
     direction={direction}
     alignItems={alignItems}
     justifyContent={justifyContent}
+    borderColor="separator"
     borderWidth="xs 0 0 0"
     gap={gap}
     style={{
       flexShrink: 0,
-      borderColor: 'var(--modal-border-separator-color, var(--color-brand-grey-100))',
       ...style,
     }}
     {...restProps}
diff --git a/src/components/Modal/components/ModalHeader/ModalHeader.tsx b/src/components/Modal/components/ModalHeader/ModalHeader.tsx
index d00b0093a..31be0b445 100644
--- a/src/components/Modal/components/ModalHeader/ModalHeader.tsx
+++ b/src/components/Modal/components/ModalHeader/ModalHeader.tsx
@@ -27,10 +27,10 @@ export const ModalHeader: FC<ModalHeaderProps> = ({ id, onDismiss, title = undef
       direction="row"
       alignItems="center"
       justifyContent={justifyContentValue}
+      borderColor="separator"
       borderWidth="0 0 xs 0"
       style={{
         flexShrink: 0,
-        borderColor: 'var(--modal-border-separator-color, var(--color-brand-grey-100))',
       }}
       height="lg"
     >
@@ -46,7 +46,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({ id, onDismiss, title = undef
           className={styles['modal-close']}
           onClick={onDismiss}
         >
-          <Icon name="remove" />
+          <Icon name="remove-light" />
         </button>
       )}
     </Box>

From d0355638e6a093cbc5187e1b5732c748f5da4ade Mon Sep 17 00:00:00 2001
From: nathanyoung <1447339+nathanyoung@users.noreply.github.com>
Date: Thu, 13 Jun 2024 09:43:54 -0700
Subject: [PATCH 2/3] Update Modal.module.scss

---
 src/components/Modal/Modal.module.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index 0d6e21501..d23517ba9 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -32,6 +32,7 @@
   }
 }
 
+
 [data-reach-dialog-overlay].modal {
   display: flex;
   position: fixed;
@@ -41,8 +42,7 @@
   left: 0;
   align-items: flex-end;
   z-index: var(--size-z-index-overlay);
-  background: hsl(0deg 0% 0% / 33%);
-  background-color: rgb(77 82 79 / 50%);
+  background-color: rgba(0, 0, 0, 0.6);
   overflow: hidden;
 
   :global {

From e421169ee8b3ecd5df8aa6bb85c2eb9da5735de5 Mon Sep 17 00:00:00 2001
From: nathanyoung <1447339+nathanyoung@users.noreply.github.com>
Date: Thu, 13 Jun 2024 10:00:46 -0700
Subject: [PATCH 3/3] Update Modal.module.scss

---
 src/components/Modal/Modal.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index d23517ba9..421852d6a 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -42,7 +42,7 @@
   left: 0;
   align-items: flex-end;
   z-index: var(--size-z-index-overlay);
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0 0 0 / 60%);
   overflow: hidden;
 
   :global {