@fluid-topics/ft-modal 1.3.31 → 1.3.32

package/build/ft-modal.styles.js

@@ -1,27 +1,31 @@
 import { css } from "lit";
 import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
 export const FtModalCssVariables = {
-    shadow: FtCssVariableFactory.create("--ft-modal-shadow", "", "SHADOW", "0 6px 13px 0 rgba(0, 0, 0, .06), 0 3px 7px 0 rgba(0, 0, 0, .14), 0 1px 2px 0 rgba(0, 0, 0, .06)"),
+    shadow: FtCssVariableFactory.extend("--ft-modal-shadow", "", designSystemVariables.elevation03),
     borderRadius: FtCssVariableFactory.extend("--ft-modal-border-radius", "", designSystemVariables.borderRadiusM),
     width: FtCssVariableFactory.create("--ft-modal-width", "", "SIZE", "800px"),
-    headerPadding: FtCssVariableFactory.create("--ft-modal-header-padding", "", "SIZE", "8px"),
+    headerPadding: FtCssVariableFactory.create("--ft-modal-header-padding", "", "SIZE", "8px 16px"),
     headerGap: FtCssVariableFactory.create("--ft-modal-header-gap", "", "SIZE", "8px"),
     headerBorderColor: FtCssVariableFactory.extend("--ft-modal-header-border-color", "", designSystemVariables.colorOutline),
     headerBorderWidth: FtCssVariableFactory.create("--ft-modal-header-border-width", "", "SIZE", "1px"),
-    headerBackgroundColor: FtCssVariableFactory.create("--ft-modal-header-background-color", "", "COLOR", "#fbfbfc"),
+    headerBackgroundColor: FtCssVariableFactory.extend("--ft-modal-header-background-color", "", designSystemVariables.colorSurface),
     headerColor: FtCssVariableFactory.extend("--ft-modal-header-color", "", designSystemVariables.colorOnSurfaceHigh),
     headerIconColor: FtCssVariableFactory.extend("--ft-modal-header-icon-color", "", designSystemVariables.colorOnSurfaceHigh),
     contentMargin: FtCssVariableFactory.create("--ft-modal-content-margin", "", "SIZE", "16px"),
     contentPadding: FtCssVariableFactory.create("--ft-modal-content-padding", "", "SIZE", "16px"),
     contentGap: FtCssVariableFactory.create("--ft-modal-content-gap", "", "SIZE", "16px"),
     contentBackgroundColor: FtCssVariableFactory.extend("--ft-modal-content-background-color", "", designSystemVariables.colorSurface),
-    contentColor: FtCssVariableFactory.extend("--ft-modal-content-color", "", designSystemVariables.colorOnSurfaceHigh),
+    contentColor: FtCssVariableFactory.extend("--ft-modal-content-color", "", designSystemVariables.colorOnSurfaceMedium),
     actionsGap: FtCssVariableFactory.create("--ft-modal-action-gap", "", "SIZE", "8px"),
     overlayBackgroundColor: FtCssVariableFactory.create("--ft-modal-overlay-background-color", "", "COLOR", "rgba(10, 10, 13, 0.4)"),
     closingButtonColor: FtCssVariableFactory.extend("--ft-modal-closing-button-color", "", designSystemVariables.colorOnSurfaceMedium),
 };
 // language=CSS
 export const ftmodalStyles = css `
+    [part=container] {
+        display: contents;
+    }
+
     [part=dialog] {
         width: 100%;
         height: 100%;
@@ -43,6 +47,9 @@ export const ftmodalStyles = css `
         background-color: ${FtModalCssVariables.contentBackgroundColor};
         display: flex;
         flex-direction: column;
+        overflow: hidden;
+        max-height: 100%;
+        max-width: 100%;
 
         @media (min-width: 768px) {
             top: 50%;
@@ -52,10 +59,9 @@ export const ftmodalStyles = css `
             border-radius: ${FtModalCssVariables.borderRadius};
             overflow: hidden;
             width: ${FtModalCssVariables.width};
-            margin: auto max(
-                ${FtModalCssVariables.contentMargin},
-                calc((100% - ${FtModalCssVariables.width}) / 2)
-            );
+            margin: auto;
+            max-height: calc(100% - 24px);
+            max-width: calc(100% - 24px);
         }
     }
 
@@ -85,7 +91,9 @@ export const ftmodalStyles = css `
     }
 
     [part=body] {
+        flex-shrink: 1;
         flex-grow: 1;
+        overflow: auto;
         padding: ${FtModalCssVariables.contentPadding};
         display: flex;
         flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-modal",
-    "version": "1.3.31",
+    "version": "1.3.32",
     "description": "Modal for Design System V2",
     "keywords": [
         "Lit"
@@ -19,11 +19,11 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-wc-utils": "1.3.31",
+        "@fluid-topics/ft-wc-utils": "1.3.32",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.31"
+        "@fluid-topics/ft-wc-test-utils": "1.3.32"
     },
-    "gitHead": "21f607fc431d772e45fa35847dbf676e00665302"
+    "gitHead": "60fe73e7ae4d0815116abe89d2c4315cf454f626"
 }