[ui] Modal backdrop update (#228)

* [ui] Modal: update backdrop colors * [ui] bump version to 0.8.8 * [ui] Modal: update Modal bg color, remove ModalFooter bg color * [ui] Modal: add rounded corners
sapcc · Nov 10, 2022 · 53ee6fc · 53ee6fc
1 parent 432be11
commit 53ee6fc
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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: {