diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index c5631a97182c..088a31dcb571 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -13,6 +13,7 @@ import toggleClass from '../../tools/toggleClass';
import Button from '../Button';
import ButtonSet from '../ButtonSet';
import InlineLoading from '../InlineLoading';
+import { Layer } from '../Layer';
import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
import wrapFocus, {
wrapFocusWithoutSentinels,
@@ -528,13 +529,13 @@ const Modal = React.forwardRef(function Modal(
{normalizedSlug}
{!passiveModal && modalButton}
-
{children}
-
+
{!passiveModal && (
{Array.isArray(secondaryButtons) && secondaryButtons.length <= 2
@@ -581,8 +582,9 @@ const Modal = React.forwardRef(function Modal(
);
return (
- {}}
@@ -610,7 +612,7 @@ const Modal = React.forwardRef(function Modal(
Focus sentinel
)}
-
+
);
});
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
index 3ae99d4a2881..2fbe9e604fc6 100644
--- a/packages/styles/scss/components/modal/_modal.scss
+++ b/packages/styles/scss/components/modal/_modal.scss
@@ -50,99 +50,6 @@
transition: none;
}
}
-
- // V11: Question for design: do we have an updated tokens for fields that exist on `layer`?
- .#{$prefix}--pagination,
- .#{$prefix}--pagination__control-buttons,
- .#{$prefix}--text-input,
- .#{$prefix}--text-area,
- .#{$prefix}--search-input,
- .#{$prefix}--select-input,
- .#{$prefix}--dropdown,
- .#{$prefix}--dropdown-list,
- .#{$prefix}--number input[type='number'],
- .#{$prefix}--date-picker__input,
- .#{$prefix}--multi-select,
- .#{$prefix}--number__control-btn::before,
- .#{$prefix}--number__control-btn::after,
- .#{$prefix}--list-box input[role='combobox'] {
- background-color: $field-02;
- }
-
- // Override to align layer token with field
- .#{$prefix}--list-box__menu {
- background-color: $layer-02;
- }
-
- .#{$prefix}--number__rule-divider {
- background-color: $border-subtle-02;
- }
-
- .#{$prefix}--list-box__menu-item__option {
- border-block-start-color: $border-subtle-02;
- }
-
- .#{$prefix}--list-box__menu-item:hover
- .#{$prefix}--list-box__menu-item__option {
- border-block-start-color: $layer-hover-02;
- }
-
- .#{$prefix}--list-box__menu-item--active:hover
- .#{$prefix}--list-box__menu-item__option {
- border-block-start-color: $layer-selected-hover-02;
- }
-
- // Fluid inputs
- .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
- .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
- .#{$prefix}--text-area--fluid .#{$prefix}--text-area,
- .#{$prefix}--search--fluid .#{$prefix}--search-input,
- .#{$prefix}--select--fluid .#{$prefix}--select-input,
- .#{$prefix}--text-area--fluid
- .#{$prefix}--text-area__wrapper[data-invalid]
- .#{$prefix}--text-area__divider
- + .#{$prefix}--form-requirement,
- .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
- .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
- .#{$prefix}--number-input--fluid input[type='number'],
- .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
- .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
- .#{$prefix}--date-picker--fluid
- .c#{$prefix}ds--date-picker-input__wrapper
- .#{$prefix}--date-picker__input {
- background-color: $field-01;
- }
-
- // Override to align layer token with field
- .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu {
- background-color: $layer-01;
- }
-
- .#{$prefix}--list-box__menu-item:hover {
- background-color: $layer-hover-02;
- }
-
- .#{$prefix}--list-box__menu-item--active {
- background-color: $layer-selected-02;
- }
-
- .#{$prefix}--list-box__menu-item--active:hover {
- background-color: $layer-selected-hover-02;
- }
-
- .#{$prefix}--number-input--fluid
- .#{$prefix}--number__control-btn:hover::before,
- .#{$prefix}--number-input--fluid
- .#{$prefix}--number__control-btn:hover::after {
- background-color: $field-hover;
- }
-
- .#{$prefix}--number-input--fluid
- .#{$prefix}--number__control-btn:focus::before,
- .#{$prefix}--number-input--fluid
- .#{$prefix}--number__control-btn:focus::after {
- border-inline-start: 2px solid $focus;
- }
}
.#{$prefix}--modal.is-visible .#{$prefix}--modal-container {