@rolster/styles-foundations 2.6.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
   "sass": "scss/styles.scss",
   "style": "dist/styles.css",

package/scss/components/app.scss

@@ -1,9 +1,9 @@
 // Rolster Technology App Component
-// v2.3.6
+// v2.3.7
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 24/Sep/2025
+// Updated: 08/Nov/2025
 
 .rls-app {
   &__body {
@@ -75,6 +75,7 @@
       height: 100%;
       margin: 0rem;
       padding: 0rem;
+      background: var(--rlc-app-navbar-background, var(--rls-theme-color-200));
       transition: width 280ms var(--rls-acceleration-curve);
 
       & + .rls-app__page__content {
@@ -87,11 +88,15 @@
         position: relative;
         width: 100%;
         height: 100%;
-        background: var(--rlc-app-navbar-background, var(--rls-app-color-100));
-        border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
+        background: var(
+          --rlc-app-navbar-content-background,
+          rgba(255, 255, 255, 0.84)
+        );
+        backdrop-filter: blur(2px);
         overflow-x: hidden;
         overflow-y: auto;
         box-sizing: border-box;
+        border-right: var(--rls-app-border-1-200);
       }
     }
 

package/scss/components/data-table.scss

@@ -8,6 +8,7 @@
 @mixin datatable_cell() {
   --rlc-field-box-body-background: transparent;
   --rlc-field-box-body-background-focused: transparent;
+  --rlc-field-box-body-background-disabled: transparent;
   --rlc-field-box-body-padding: 0rem;
   --rlc-field-box-body-border: none;
   --rlc-field-box-body-border-focused: none;
@@ -155,7 +156,7 @@
     padding: 0rem var(--rls-sizing-x6);
     box-sizing: border-box;
     background: var(--pvt-datatable-header-background);
-    border: var(--rls-app-border-1-300);
+    border: var(--rls-app-border-1-200);
     border-radius: var(--rls-sizing-x4);
 
     .rls-poster {
@@ -214,35 +215,35 @@
     padding: 0rem var(--rls-sizing-x6);
     box-sizing: border-box;
     background: var(--pvt-datatable-record-background);
-    border: var(--rls-app-border-1-300);
+    border: var(--rls-app-border-1-200);
     border-radius: var(--rls-sizing-x4);
 
     &--success {
       --pvt-datatable-floating-background: var(--rls-success-color-100);
 
       background: var(--rls-success-color-050);
-      border: var(--rls-success-border-1-300);
+      border: var(--rls-success-border-1-200);
     }
 
     &--info {
       --pvt-datatable-floating-background: var(--rls-info-color-100);
 
       background: var(--rls-info-color-050);
-      border: var(--rls-info-border-1-300);
+      border: var(--rls-info-border-1-200);
     }
 
     &--warning {
       --pvt-datatable-floating-background: var(--rls-warning-color-100);
 
       background: var(--rls-warning-color-050);
-      border: var(--rls-warning-border-1-300);
+      border: var(--rls-warning-border-1-200);
     }
 
     &--error {
       --pvt-datatable-floating-background: var(--rls-danger-color-100);
 
       background: var(--rls-danger-color-050);
-      border: var(--rls-danger-border-1-300);
+      border: var(--rls-danger-border-1-200);
     }
 
     &--contained {

package/scss/components/field-box.scss

@@ -11,6 +11,11 @@
     var(--rls-app-color-050)
   );
 
+  --pvt-body-background-disabled: var(
+    --rlc-field-box-body-background-disabled,
+    var(--rls-app-color-100)
+  );
+
   --pvt-body-border: var(
     --rlc-field-box-body-border,
     var(--rls-app-border-1-300)
@@ -74,7 +79,7 @@
     --pvt-body-opacity: 0.75;
     --pvt-label-opacity: 0.5;
 
-    --pvt-body-background: var(--rls-app-color-100);
+    --pvt-body-background: var(--pvt-body-background-disabled);
     --pvt-body-border: var(--pvt-body-border-disabled);
   }
 

package/scss/components/field-list.scss

@@ -26,7 +26,7 @@
   --pvt-list-transform: none;
   --pvt-list-body-component-display: none;
   --pvt-list-body-height: 0rem;
-  --pvt-list-body-max-height: 100%;
+  --pvt-list-body-max-height: 160rem;
   --pvt-list-body-border: var(--rls-theme-border-1-500);
   --pvt-list-component-padding: 0rem var(--rls-sizing-x4);
   --pvt-backdrop-opacity: 0;

package/scss/foundations/colors.scss

@@ -30,47 +30,47 @@ body {
 
   @include helpers.rolster-theme(
     'primary',
-    #0d275e,
-    #0c409c,
-    #064dd9,
-    #0058f8,
-    #0471ff,
-    #1b91ff,
-    #46b5ff,
-    #81d1ff,
-    #b4e2ff,
-    #d5edff,
-    #ecf8ff
+    #0b2446,
+    #103a6a,
+    #0c4380,
+    #094e9b,
+    #0a63bf,
+    #1780e0,
+    #409cf0,
+    #82bdf7,
+    #bddbfa,
+    #e1edfd,
+    #f1f7fe
   );
 
   @include helpers.rolster-theme(
     'secondary',
-    #003426,
-    #005c42,
-    #00714e,
-    #008f60,
-    #00b373,
-    #00da8b,
-    #0cdd90,
-    #56ffbb,
-    #98ffd1,
-    #c9ffe5,
-    #e9fff5
+    #0e2525,
+    #20413f,
+    #224d4b,
+    #265f5b,
+    #2b7671,
+    #39938b,
+    #53aea5,
+    #7ecac0,
+    #aee1d8,
+    #d7f0ec,
+    #f3faf8
   );
 
   @include helpers.rolster-theme(
     'tertiary',
-    #440d0b,
-    #7d221f,
-    #97211d,
-    #b6241f,
-    #d92f29,
-    #ed5752,
-    #f67773,
-    #faaaa7,
-    #fdcdcb,
-    #fde4e3,
-    #fef2f2
+    #460404,
+    #82100c,
+    #a1100b,
+    #cc1102,
+    #ff2101,
+    #ff3c0a,
+    #ff6532,
+    #ff9a6d,
+    #ffc4a5,
+    #ffe3d3,
+    #fff3ec
   );
 
   @include helpers.rolster-theme(