@fluid-topics/ft-modal 1.3.31 → 1.3.33

package/build/ft-modal.styles.d.ts

@@ -1,6 +1,7 @@
 export declare const FtModalCssVariables: {
     shadow: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    height: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     width: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     headerPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     headerGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
@@ -9,13 +10,13 @@ export declare const FtModalCssVariables: {
     headerBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     headerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     headerIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    contentMargin: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     contentPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     contentGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     contentBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     contentColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     actionsGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     overlayBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    overlayOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     closingButtonColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const ftmodalStyles: import("lit").CSSResult;

package/build/ft-modal.styles.js

@@ -1,27 +1,32 @@
 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),
+    height: FtCssVariableFactory.create("--ft-modal-height", "", "SIZE", "fit-content"),
     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)"),
+    overlayBackgroundColor: FtCssVariableFactory.create("--ft-modal-overlay-background-color", "", "COLOR", "rgb(10, 10, 13)"),
+    overlayOpacity: FtCssVariableFactory.create("--ft-modal-overlay-opacity", "", "NUMBER", "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%;
@@ -35,6 +40,7 @@ export const ftmodalStyles = css `
         position: absolute;
         inset: 0;
         background-color: ${FtModalCssVariables.overlayBackgroundColor};
+        opacity: ${FtModalCssVariables.overlayOpacity};
     }
 
     [part=inner-container] {
@@ -43,6 +49,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%;
@@ -51,11 +60,11 @@ export const ftmodalStyles = css `
             box-shadow: ${FtModalCssVariables.shadow};
             border-radius: ${FtModalCssVariables.borderRadius};
             overflow: hidden;
+            height: ${FtModalCssVariables.height};
             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 +94,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.33",
     "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.33",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.31"
+        "@fluid-topics/ft-wc-test-utils": "1.3.33"
     },
-    "gitHead": "21f607fc431d772e45fa35847dbf676e00665302"
+    "gitHead": "2a04025b0522125d78eed0ef85a4b43a1152ac01"
 }