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 content
-
+
Cancel
Primary Action
@@ -192,7 +192,7 @@ Omit ` ` to render a minimal modal without a header.
>
Modal content
-
+
Cancel
Primary Action
@@ -239,7 +239,7 @@ Use `fullScreenMobile` to enable fullscreen at mobile viewport widths.
/>
Modal content
-
+
Cancel
Primary Action
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 = () => (
null} />
Modal content
- null}>
+ null}>
Cancel
Primary Action
@@ -58,7 +58,7 @@ export const WithoutHeader = () => (
null}>
Modal content
- null}>
+ null}>
Cancel
Primary Action
@@ -75,7 +75,7 @@ export const FullScreenOnMobile = () => (
/>
Modal content
- null}>
+ null}>
Cancel
Primary Action
@@ -92,7 +92,7 @@ export const WithMaxWidth = () => (
/>
Modal content
- null}>
+ null}>
Cancel
Primary Action
@@ -114,7 +114,7 @@ export const WithResponsiveMaxWidth = () => (
/>
Modal content
- null}>
+ null}>
Cancel
Primary Action
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index 8e94ea778..421852d6a 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,
@@ -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))
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 body content
@@ -55,7 +55,7 @@ describe('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 = ({
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 = ({ 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 = ({ id, onDismiss, title = undef
className={styles['modal-close']}
onClick={onDismiss}
>
-
+
)}