@rolster/styles-foundations 2.4.12 → 2.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.4.12",
+  "version": "2.4.14",
   "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.2.1
+// v2.2.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 18/Abr/2025
+// Updated: 23/Abr/2025
 
 .rls-app {
   &__body {
@@ -19,6 +19,10 @@
     &--snackbar {
       --rlc-snackbar-left: calc(50% + calc(var(--rlc-app-navbar-width) / 2));
     }
+
+    &--navbar-condense {
+      --rlc-app-navbar-width: 36rem;
+    }
   }
 
   &__header {
@@ -64,8 +68,9 @@
       height: 100%;
       margin: 0rem;
       padding: 0rem;
-      overflow: auto;
       box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
       border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
       background: var(--rlc-app-navbar-background);
 

package/scss/components/data-table.scss

@@ -1,5 +1,5 @@
 // Rolster Technology Datatable Component
-// v2.3.1
+// v2.3.2
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
@@ -15,9 +15,9 @@
   --rlc-action-ripple-position: -8rem;
 
   --rlc-fieldbox-body-background: transparent;
-  --rlc-fieldbox-body-border: none;
   --rlc-fieldbox-body-padding: 0rem;
   --rlc-fieldbox-body-shadow: none;
+  --rlc-fieldbox-action-background: transparent;
 
   --rlc-switch-bar-radius: var(--rls-sizing-x2);
   --rlc-switch-bar-height: var(--rls-sizing-x4);
@@ -91,7 +91,6 @@
     padding: var(--pvt-datatable-padding-component);
     box-sizing: border-box;
     background: var(--rlc-datatable-header-background);
-    border: var(--rls-app-border-1-100);
     border-radius: var(--rls-sizing-x4);
   }
 
@@ -166,7 +165,6 @@
     column-gap: var(--rls-sizing-x6);
     padding: 0rem var(--rls-sizing-x6);
     box-sizing: border-box;
-    border: var(--rls-app-border-1-100);
     border-radius: var(--rls-sizing-x4);
     background: var(--pvt-datatable-record-background);
 
@@ -246,10 +244,10 @@
 
     .rls-field-list {
       --rlc-fieldbox-body-background: transparent;
-      --rlc-fieldbox-body-border: none;
       --rlc-fieldbox-body-padding: var(--rls-sizing-x4) 0rem;
       --rlc-fieldbox-body-shadow: none;
-      --rlc-fieldlist-action-dimension: var(--rls-sizing-x10);
+      --rlc-fieldbox-action-dimension: var(--rls-sizing-x10);
+      --rlc-fieldbox-action-background: transparent;
       --rlc-fieldlist-control-font-size: var(--rlc-datatable-font-size);
       --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
       --rlc-fieldlist-control-letter-spacing: var(--rls-body-letter-spacing);
@@ -287,7 +285,7 @@
     align-items: center;
     z-index: var(--rls-z-index-2);
     padding: 0rem var(--rls-sizing-x6);
-    background: var(--rls-app-color-100);
+    background: var(--rls-theme-color-100);
     border-right: none;
     transform: translateX(calc(100% - var(--rls-sizing-x4)));
     transition: transform 240ms var(--rls-standard-curve);
@@ -316,14 +314,14 @@
   }
 
   &__summary {
-    --pvt-datatable-record-background: var(--rls-theme-color-050);
+    --pvt-datatable-record-background: var(--rls-app-color-200);
 
     padding-right: var(--pvt-header-padding-right);
     box-sizing: border-box;
   }
 
   &__footer {
-    --pvt-datatable-record-background: var(--rls-theme-color-050);
+    --pvt-datatable-record-background: var(--rls-app-color-200);
 
     position: relative;
     width: 100%;

package/scss/components/field-box.scss

@@ -1,9 +1,9 @@
 // Rolster Technology FieldBox Component
-// v2.1.4
+// v2.1.5
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 18/Abr/2025
+// Updated: 23/Abr/2025
 
 .rls-field-box {
   --pvt-label-opacity: 1;
@@ -19,14 +19,11 @@
 
   &--focused {
     --rlc-fieldbox-body-background: var(--rls-app-color-050);
-    --rlc-fieldbox-body-border: var(--rls-theme-border-1-500);
     --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
     --rlc-fieldbox-label-font-color: var(--rls-theme-color-500);
   }
 
   &--error {
-    --rlc-fieldbox-body-border: var(--rls-border-1) solid
-      var(--rls-danger-color-500);
     --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-danger-shadow-500);
     --rlc-fieldbox-label-font-color: var(--rls-danger-color-500);
   }
@@ -70,7 +67,6 @@
     border-radius: var(--rls-sizing-x2);
     background: var(--rlc-fieldbox-body-background);
     padding: var(--rlc-fieldbox-body-padding);
-    border: var(--rlc-fieldbox-body-border);
     box-shadow: var(--rlc-fieldbox-body-shadow);
   }
 

package/scss/components/field-list.scss

@@ -14,7 +14,7 @@
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
 
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
 
   position: relative;
   box-sizing: border-box;
@@ -31,7 +31,7 @@
 
   &__control {
     position: relative;
-    width: calc(100% - var(--rlc-fieldlist-action-dimension));
+    width: calc(100% - var(--rlc-fieldbox-action-dimension));
     height: var(--rls-sizing-x12);
     line-height: var(--rls-sizing-x12);
     padding: 0rem;
@@ -59,14 +59,19 @@
   }
 
   &__action {
-    --rlc-icon-dimesion: var(--rlc-fieldlist-action-dimension);
+    --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
 
+    width: var(--rlc-fieldbox-action-dimension);
+    height: var(--rlc-fieldbox-action-dimension);
     color: var(--pvt-action-font-color);
-    width: var(--rlc-fieldlist-action-dimension);
-    height: var(--rlc-fieldlist-action-dimension);
     padding: 0rem;
     outline: none;
-    background: transparent;
+    border-radius: 50%;
+    background: var(--rlc-fieldbox-action-background);
+
+    .rls-icon {
+      margin: 1rem;
+    }
   }
 
   &__suggestions {
@@ -109,7 +114,6 @@
       overflow: hidden;
       z-index: var(--rls-z-index-2);
       background: var(--rls-app-color-050);
-      border: var(--rls-theme-border-1-500);
       box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
       transform: var(--pvt-list-transform);
     }

package/scss/components.scss

@@ -1,17 +1,17 @@
 // Rolster Technology Components
-// v2.1.0
+// v2.2.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 13/Abr/2023
-// Updated: 18/Abr/2025
+// Updated: 23/Abr/2025
 
 @use 'sass:meta';
 
 :root {
   --rlc-app-content-background: var(--rls-app-color-050);
-  --rlc-app-header-background: var(--rls-app-color-200);
+  --rlc-app-header-background: var(--rls-app-color-100);
   --rlc-app-header-height: var(--rls-sizing-x28);
-  --rlc-app-navbar-background: var(--rls-app-color-200);
+  --rlc-app-navbar-background: var(--rls-app-color-100);
   --rlc-app-navbar-width: 160rem;
 
   --rlc-action-color: var(--rls-app-color-600);
@@ -57,30 +57,30 @@
   --rlc-datatable-body-overflow: initial;
   --rlc-datatable-letter-spacing: 0.0625em;
   --rlc-datatable-font-size: 7rem;
-  --rlc-datatable-footer-background: var(--rls-theme-color-100);
-  --rlc-datatable-header-background: transparent;
+  --rlc-datatable-footer-background: var(--rls-theme-color-050);
+  --rlc-datatable-header-background: var(--rls-theme-color-100);
   --rlc-datatable-header-font-weight: var(--rls-font-weight-semibold);
   --rlc-datatable-padding-scroll: 0rem;
-  --rlc-datatable-record-background: rgb(252, 252, 252);
+  --rlc-datatable-record-background: var(--rls-app-color-100);
   --rlc-datatable-width-scroll: var(--rls-sizing-x4);
 
   --rlc-fieldbox-padding: 0rem;
   --rlc-fieldbox-width: 100%;
-  --rlc-fieldbox-body-background: rgba(255, 255, 255, 1);
-  --rlc-fieldbox-body-border: var(--rls-app-border-1-100);
+  --rlc-fieldbox-body-background: var(--rls-app-color-100);
   --rlc-fieldbox-body-padding: 0rem;
   --rlc-fieldbox-body-shadow: none;
   --rlc-fieldbox-error-display: block;
   --rlc-fieldbox-label-display: block;
   --rlc-fieldbox-label-font-color: var(--rls-app-color-600);
+  --rlc-fieldbox-action-dimension: var(--rls-sizing-x12);
+  --rlc-fieldbox-action-background: var(--rls-app-color-050);
 
-  --rlc-fieldlist-action-dimension: var(--rls-sizing-x12);
   --rlc-fieldlist-control-font-size: var(--rlc-input-font-size);
   --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
   --rlc-fieldlist-control-letter-spacing: var(--rlc-input-letter-spacing);
   --rlc-fieldlist-element-padding: var(--rls-sizing-x2);
-  --rlc-fieldlist-suggestions-bottom: 100%;
-  --rlc-fieldlist-suggestions-top: calc(100% + var(--rls-sizing-x4));
+  --rlc-fieldlist-suggestions-bottom: calc(100% - var(--rls-sizing-x4));
+  --rlc-fieldlist-suggestions-top: calc(100% + var(--rls-sizing-x6));
 
   --rlc-form-footer-justify-content: end;
 

package/scss/foundations/colors.scss

@@ -1,32 +1,54 @@
 // Rolster Technology Colors Foundations
-// v2.6.0
+// v2.6.2
 // @license MIT
 // Author: Rolster Developers
 // Created: 03/Mar/2022
-// Updated: 18/Abr/2025
+// Updated: 23/Abr/2025
 
 @use 'helpers' as helpers;
 
 :root {
-  --rls-app-color-900: rgba(40, 50, 61, 1);
+  --rls-app-color-900: rgb(40, 50, 61);
 
-  --rls-app-color-800: rgba(52, 57, 87, 1);
+  --rls-app-color-800: rgb(52, 57, 87);
 
-  --rls-app-color-700: rgba(72, 77, 107, 1);
+  --rls-app-color-700: rgb(72, 77, 107);
 
-  --rls-app-color-600: rgba(98, 111, 155, 1);
+  --rls-app-color-600: rgb(98, 111, 155);
 
-  --rls-app-color-500: rgba(128, 141, 190, 1);
+  --rls-app-color-500: rgb(128, 141, 190);
 
-  --rls-app-color-400: rgba(173, 186, 212, 1);
+  --rls-app-color-400: rgb(189, 192, 220);
 
-  --rls-app-color-300: rgba(197, 203, 209, 1);
+  --rls-app-color-300: rgb(214, 217, 240);
 
-  --rls-app-color-200: rgba(209, 214, 239, 1);
+  --rls-app-color-200: rgb(229, 232, 245);
 
-  --rls-app-color-100: rgba(239, 242, 252, 1);
+  --rls-app-color-100: rgb(244, 247, 255);
 
-  --rls-app-color-050: rgba(255, 255, 255, 1);
+  --rls-app-color-050: rgb(255, 255, 255);
+
+  *[app-theme='dark'] {
+    --rls-app-color-050: rgb(40, 50, 61);
+
+    --rls-app-color-100: rgb(52, 57, 87);
+
+    --rls-app-color-200: rgb(72, 77, 107);
+
+    --rls-app-color-300: rgb(98, 111, 155);
+
+    --rls-app-color-400: rgb(128, 141, 190);
+
+    --rls-app-color-500: rgb(189, 192, 220);
+
+    --rls-app-color-600: rgb(214, 217, 240);
+
+    --rls-app-color-700: rgb(229, 232, 245);
+
+    --rls-app-color-800: rgb(244, 247, 255);
+
+    --rls-app-color-900: rgb(255, 255, 255);
+  }
 
   @include helpers.rolster-theme(
     'primary',
@@ -223,25 +245,3 @@
     #f5f5f1
   );
 }
-
-*[app-theme='dark'] {
-  --rls-app-color-900: rgba(255, 255, 255, 1);
-
-  --rls-app-color-800: rgba(239, 242, 252, 1);
-
-  --rls-app-color-700: rgba(209, 214, 239, 1);
-
-  --rls-app-color-600: rgba(197, 203, 209, 1);
-
-  --rls-app-color-500: rgba(173, 186, 212, 1);
-
-  --rls-app-color-400: rgba(128, 141, 190, 1);
-
-  --rls-app-color-300: rgba(98, 111, 155, 1);
-
-  --rls-app-color-200: rgba(72, 77, 107, 1);
-
-  --rls-app-color-100: rgba(52, 57, 87, 1);
-
-  --rls-app-color-050: rgba(40, 50, 61, 1);
-}

package/scss/utilities/normalize.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Normalize Utilities
-// v2.0.2
+// v2.0.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 11/Ago/2022
-// Updated: 18/Abr/2025
+// Updated: 23/Abr/2025
 
 :root {
   --rls-app-font-family: -apple-system, -rolster-system-font, BlinkMacSystemFont,
@@ -27,11 +27,6 @@ body {
   color: var(--rls-app-color-900);
   background: var(--rlc-app-body-background);
   -webkit-tap-highlight-color: transparent;
-
-  &.rls-app-body {
-    --rlc-fieldbox-body-background: rgba(248, 248, 248, 1);
-    --rlc-app-body-background: var(--rls-app-color-100);
-  }
 }
 
 div {