@fluid-topics/ft-modal 1.3.32 → 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

@@ -3,6 +3,7 @@ import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc
 export const FtModalCssVariables = {
     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 16px"),
     headerGap: FtCssVariableFactory.create("--ft-modal-header-gap", "", "SIZE", "8px"),
@@ -11,13 +12,13 @@ export const FtModalCssVariables = {
     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.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
@@ -39,6 +40,7 @@ export const ftmodalStyles = css `
         position: absolute;
         inset: 0;
         background-color: ${FtModalCssVariables.overlayBackgroundColor};
+        opacity: ${FtModalCssVariables.overlayOpacity};
     }
 
     [part=inner-container] {
@@ -58,6 +60,7 @@ export const ftmodalStyles = css `
             box-shadow: ${FtModalCssVariables.shadow};
             border-radius: ${FtModalCssVariables.borderRadius};
             overflow: hidden;
+            height: ${FtModalCssVariables.height};
             width: ${FtModalCssVariables.width};
             margin: auto;
             max-height: calc(100% - 24px);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-modal",
-    "version": "1.3.32",
+    "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.32",
+        "@fluid-topics/ft-wc-utils": "1.3.33",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.32"
+        "@fluid-topics/ft-wc-test-utils": "1.3.33"
     },
-    "gitHead": "60fe73e7ae4d0815116abe89d2c4315cf454f626"
+    "gitHead": "2a04025b0522125d78eed0ef85a4b43a1152ac01"
 }