feat: Modal dark mode

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>

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>

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,
@@ -35,6 +32,7 @@
   }
 }
 
+
 [data-reach-dialog-overlay].modal {
   display: flex;
   position: fixed;
@@ -44,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 / 60%);
   overflow: hidden;
 
   :global {
@@ -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))

src/components/Modal/Modal.test.tsx

@@ -47,15 +47,15 @@ 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>
         <Modal.Footer>This is content in the modal footer</Modal.Footer>
       </Modal>,
     );
 
-    const closeButton = getByTestId('icon-testid--remove').closest('button');
+    const closeButton = getByLabelText('close');
     expect(closeButton).toBeInTheDocument();
 
     if (closeButton) {

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}

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>