@progressiveui/styles 11.1.0 → 11.3.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.3.0](https://github.com/Polyxo/pui/compare/@progressiveui/styles@11.2.0...@progressiveui/styles@11.3.0) (2026-01-19)
+
+
+### Features
+
+* **styles:** updated modal and design vars ([72b7b7e](https://github.com/Polyxo/pui/commit/72b7b7e50e6547b81bd18cca3386034d3107720e))
+
+
+
+
+
+# [11.2.0](https://github.com/Polyxo/pui/compare/@progressiveui/styles@11.1.0...@progressiveui/styles@11.2.0) (2026-01-18)
+
+
+### Features
+
+* **Modal:** alignment updated ([e1d636f](https://github.com/Polyxo/pui/commit/e1d636febb5a506d6a400a72aedb2e5d432c570a))
+
+
+
+
+
 # [11.1.0](https://github.com/Polyxo/pui/compare/@progressiveui/styles@11.0.11...@progressiveui/styles@11.1.0) (2026-01-18)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressiveui/styles",
   "description": "Styles for the Progressive UI Design System",
-  "version": "11.1.0",
+  "version": "11.3.0",
   "license": "Apache-2.0",
   "author": "Robert Gühne <polyxo.de>",
   "homepage": "https://www.polyxo.de",
@@ -27,7 +27,7 @@
     "@carbon/feature-flags": "^0.6.0",
     "@carbon/grid": "^10.39.0",
     "@carbon/motion": "^10.22.0",
-    "@progressiveui/themes-core": "^0.4.1",
+    "@progressiveui/themes-core": "^0.5.0",
     "@un/layout": "^10.26.15",
     "@un/themes": "^10.40.14"
   },
@@ -35,5 +35,5 @@
     "@carbon/test-utils": "^10.3.0",
     "css": "^3.0.0"
   },
-  "gitHead": "c2eeb90a79cd0628ef2780eb3b37202ee8548804"
+  "gitHead": "3ab25753fce2029fa479576bd68fd37f9b8bd659"
 }

package/scss/components/modal/_modal.scss

@@ -94,7 +94,7 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
       background: $action-default-fill-primary-default;
     } */
     //border-top: $modal-border-top;
-    // border-radius: $modal-border-radius;
+    border-radius: $modal-border-radius;
     min-width: 100%;
     //max-height: 100%;
     height: 100%;
@@ -225,7 +225,7 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
 
   .#{$prefix}--modal-close {
     position: absolute;
-    top: calcRem(8px);
+    top: calcRem(6px);
     right: calcRem(6px);
     padding: 0;
     overflow: hidden;
@@ -248,8 +248,8 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
     color: $text-body-default;
     transition: 200ms;
     // fill: var(--ui-05); // TODO change $field-border
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 1.7rem;
+    height: 1.7rem;
   }
 
   .#{$prefix}--modal--background-image {
@@ -261,8 +261,8 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
   .#{$prefix}--modal-container {
     @include breakpoint-down("md") {
       min-width: 50%;
-      width: 90%;
-      max-width: 90%;
+      width: 95%;
+      max-width: 95%;
       height: auto;
     }
   }
@@ -306,35 +306,34 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
 .#{$prefix}--modal--mobile-fullscreen {
   @include breakpoint-down("md") {
     .#{$prefix}--modal-header {
-      padding-top: calc(var(--safe-area-inset-top) + $spacing-05);
+      padding-top: calc(var(--safe-area-inset-top, 0px) + $spacing-05);
     }
     .#{$prefix}--modal-close {
-      top: calc(var(--safe-area-inset-top) + calcRem(8px));
+      top: calc(var(--safe-area-inset-top, 0px) + calcRem(6px));
     }
 
     .#{$prefix}--modal-inner {
       align-self: center;
       width: 100%;
       height: 100%;
-      border-radius: 0;
     }
     .#{$prefix}--modal-container {
       width: 100%;
       height: 100%;
       border-radius: 0;
       max-width: 100%;
-
+      border-radius: 0;
       width: 100%;
       height: 100%;
     }
     .#{$prefix}--modal-footer {
-      padding-bottom: calc(var(--safe-area-inset-bottom) + $spacing-05);
+      padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + $spacing-05);
     }
   }
   &.#{$prefix}--modal-passive {
     .#{$prefix}--modal-content {
       @include breakpoint-down("md") {
-        padding-bottom: calc(var(--safe-area-inset-bottom) + $spacing-05);
+        padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + $spacing-05);
       }
     }
   }
@@ -352,13 +351,13 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
       border-radius: $modal-border-radius $modal-border-radius 0 0;
     }
     .#{$prefix}--modal-footer {
-      padding-bottom: calc(var(--safe-area-inset-bottom) + $spacing-05);
+      padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + $spacing-05);
     }
   }
   &.#{$prefix}--modal-passive {
     .#{$prefix}--modal-content {
       @include breakpoint-down("md") {
-        padding-bottom: calc(var(--safe-area-inset-bottom) + $spacing-05);
+        padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + $spacing-05);
       }
     }
   }
@@ -370,16 +369,16 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
   .wfp--modal--tall {
     // padding-top: 0 !important;
     .wfp--modal-header {
-      padding-top: calc(env(safe-area-inset-bottom) + 2rem) !important;
+      padding-top: calc(env(safe-area-inset-bottom, 0px) + 2rem) !important;
     }
 
     .wfp--modal-close {
-      top: calc(env(safe-area-inset-bottom) + 2rem) !important;
+      top: calc(env(safe-area-inset-bottom, 0px) + 2rem) !important;
     }
   }
 
   .wfp--modal-footer {
-    padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
+    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
   }
 }
   */