@progressiveui/styles 11.2.0 → 11.3.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressiveui/styles",
   "description": "Styles for the Progressive UI Design System",
-  "version": "11.2.0",
+  "version": "11.3.1",
   "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.1",
     "@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": "26175b5523aab4e29d22228345e797f03f73f477"
+  "gitHead": "b662910f37603a3687908e5030f94459b6342e23"
 }

package/scss/components/main-navigation/_main-navigation.scss

@@ -42,7 +42,9 @@ $main-navigation-menu-width: calcRem(300px);
     color: $action-default-link-default;
     background: $background-main;
     height: $main-navigation-height;
-    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
+    // box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
+    color: $text-inverse-default;
+    background: $brand-main;
     @include reset;
     @media print {
       display: none;
@@ -73,7 +75,7 @@ $main-navigation-menu-width: calcRem(300px);
       // justify-content: center; // TODO: Check if needed
 
       > a {
-        color: $action-default-link-default; // TODO change to $link_on_color token
+        color: $text-inverse-default; // TODO change to $link_on_color token
         @include type-style("body-short-02");
         text-decoration: none;
         &.active {
@@ -82,11 +84,11 @@ $main-navigation-menu-width: calcRem(300px);
         &:hover,
         &:visited,
         &:active {
-          color: $action-default-link-default;
+          color: $text-inverse-default;
           text-decoration: underline;
         }
         &:focus {
-          color: $action-default-link-default;
+          color: $text-inverse-default;
         }
       }
     }
@@ -129,17 +131,17 @@ $main-navigation-menu-width: calcRem(300px);
 
   .#{$prefix}--main-navigation__logo {
     a {
-      color: $action-default-link-default;
+      color: $text-inverse-default;
       text-decoration: none;
       text-transform: uppercase;
       &:hover,
       &:visited,
       &:active {
-        color: $action-default-link-default;
+        color: $text-inverse-default;
         text-decoration: underline;
       }
       &:focus {
-        color: $text-body-default;
+        color: $text-inverse-default;
       }
     }
   }
@@ -287,7 +289,8 @@ $main-navigation-menu-width: calcRem(300px);
         TODO - convert raw color hex into color token in figma
         rgba(desaturate(#0b77c2, 40%), 0.15) 0 32px 78px; */
       .#{$prefix}--theme-dark & {
-        box-shadow: var(--modal-background-01) 0 3px 12px,
+        box-shadow:
+          var(--modal-background-01) 0 3px 12px,
           //TODO - create token for this color
           var(--modal-background-01) 0 32px 78px;
       }

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(2px);
+    top: calcRem(6px);
     right: calcRem(6px);
     padding: 0;
     overflow: hidden;
@@ -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(2px));
+      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);
   }
 }
   */