diff --git a/libs/juno-ui-components/package.json b/libs/juno-ui-components/package.json index 5a18f039b..e757685e9 100644 --- a/libs/juno-ui-components/package.json +++ b/libs/juno-ui-components/package.json @@ -5,7 +5,7 @@ "module": "lib/index.js", "source": "src/index.js", "style": "lib/esm/styles.css", - "version": "0.8.7", + "version": "0.8.8", "files": [ "src", "lib", diff --git a/libs/juno-ui-components/src/components/Modal/Modal.component.js b/libs/juno-ui-components/src/components/Modal/Modal.component.js index cadc9e906..64a08afab 100644 --- a/libs/juno-ui-components/src/components/Modal/Modal.component.js +++ b/libs/juno-ui-components/src/components/Modal/Modal.component.js @@ -20,14 +20,15 @@ const modalcontainerstyles = ` jn-inset-0 jn-flex jn-items-center - jn-bg-theme-modal-backdrop/60 + jn-bg-theme-modal-backdrop jn-backdrop-blur-[2px] jn-z-[9999] ` const modalstyles = ` - jn-bg-theme-background-lvl-2 + jn-bg-theme-background-lvl-0 jn-relative + jn-rounded jn-m-auto jn-overflow-y-auto jn-max-h-[90%] diff --git a/libs/juno-ui-components/src/components/ModalFooter/ModalFooter.component.js b/libs/juno-ui-components/src/components/ModalFooter/ModalFooter.component.js index b391f3096..d8bcdd828 100644 --- a/libs/juno-ui-components/src/components/ModalFooter/ModalFooter.component.js +++ b/libs/juno-ui-components/src/components/ModalFooter/ModalFooter.component.js @@ -7,7 +7,6 @@ import { knownIcons } from "../Icon/Icon.component.js" const modalfooterstyles = ` jn-flex jn-flex-row - jn-bg-theme-background-lvl-2 jn-border-t jn-border-theme-background-lvl-4 jn-py-2 diff --git a/libs/juno-ui-components/src/global.scss b/libs/juno-ui-components/src/global.scss index 1a52f13e5..fd741a8a8 100644 --- a/libs/juno-ui-components/src/global.scss +++ b/libs/juno-ui-components/src/global.scss @@ -522,7 +522,7 @@ --color-filter-pill-border: var(--color-background-lvl-4-raw); --color-filter-pill-key-bg: var(--color-background-lvl-3-raw); // LT Modal - --color-modal-backdrop-bg: var(--color-sap-white-raw); + --color-modal-backdrop-bg: rgba(0, 0, 0, 0.2); // LT Navigation --color-navigation-active: var(--color-black); // LT Box @@ -762,7 +762,7 @@ --color-filter-pill-border: var(--color-background-lvl-4-raw); --color-filter-pill-key-bg: var(--color-background-lvl-4-raw); // DT Modal - --color-modal-backdrop-bg: 13, 20, 28; + --color-modal-backdrop-bg: rgba(60, 70, 75, 0.6); // DT Navigation --color-navigation-active: var(--color-white); // DT Box diff --git a/libs/juno-ui-components/tailwind.config.js b/libs/juno-ui-components/tailwind.config.js index bd8508049..ea61b446d 100644 --- a/libs/juno-ui-components/tailwind.config.js +++ b/libs/juno-ui-components/tailwind.config.js @@ -209,7 +209,7 @@ module.exports = { "filter-input": withOpacity("--color-filter-input-bg"), "filter-input-textinput": withOpacity("--color-filter-input-textinput-bg"), "filter-pill-key": withOpacity("--color-filter-pill-key-bg"), - "modal-backdrop": withOpacity("--color-modal-backdrop-bg"), + "modal-backdrop": "var(--color-modal-backdrop-bg)", }, }, backgroundImage: {