@rolster/styles-foundations 2.3.38 → 2.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.3.38",
+  "version": "2.4.10",
   "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.0
+// v2.2.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 28/Oct/2024
+// Updated: 18/Abr/2025
 
 .rls-app {
   &__body {
@@ -93,7 +93,7 @@
   height: var(--rls-sizing-x1);
   background-image: linear-gradient(
     to right,
-    var(--rls-app-border-100) 50%,
+    var(--rls-app-color-300) 50%,
     rgba(255, 255, 255, 0) 0%
   );
   background-position: bottom;

package/scss/components/data-table.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Datatable Component
-// v2.3.0
+// v2.3.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 14/Abr/2025
+// Updated: 18/Abr/2025
 
 @mixin datatable_cell_control() {
   --rlc-avatar-border-radius: var(--rls-sizing-x3);
@@ -124,7 +124,7 @@
     display: flex;
     height: var(--rls-sizing-x20);
     line-height: var(--rls-sizing-x20);
-    color: var(--rls-app-color-500);
+    color: var(--rls-app-color-900);
     font-weight: var(--rlc-datatable-header-font-weight);
     font-size: var(--rlc-datatable-font-size);
     letter-spacing: var(--rlc-datatable-letter-spacing);
@@ -256,6 +256,10 @@
       --rlc-fieldlist-element-padding: var(--rls-sizing-x4);
       --rlc-fieldlist-suggestions-bottom: var(--rls-sizing-x24);
       --rlc-fieldlist-suggestions-top: var(--rls-sizing-x24);
+
+      &__suggestions {
+        z-index: var(--rls-z-index-2);
+      }
     }
 
     .rls-poster {
@@ -274,7 +278,9 @@
   }
 
   &__floating {
-    --pvt-action-tooltip-transform: translate(calc(-100% - var(--rls-sizing-x4)));
+    --pvt-action-tooltip-transform: translate(
+      calc(-100% - var(--rls-sizing-x4))
+    );
 
     position: absolute;
     display: flex;
@@ -285,7 +291,7 @@
     align-items: center;
     z-index: var(--rls-z-index-2);
     padding: 0rem var(--rls-sizing-x6);
-    background: var(--rls-app-background-300);
+    background: var(--rls-app-color-100);
     border-right: none;
     transform: translateX(calc(100% - var(--rls-sizing-x4)));
     transition: transform 240ms var(--rls-standard-curve);
@@ -295,13 +301,15 @@
     }
 
     &--invested {
-      --pvt-action-tooltip-transform: translate(calc(100% + var(--rls-sizing-x4)));
+      --pvt-action-tooltip-transform: translate(
+        calc(100% + var(--rls-sizing-x4))
+      );
 
       right: initial;
       left: 0;
       transform: translateX(calc(-100% + var(--rls-sizing-x6)));
       border-left: none;
-      border-right: 2px dashed var(--rls-app-border-100);
+      border-right: 2px dashed var(--rls-app-color-300);
     }
 
     .rls-button-action__tooltip {

package/scss/components/field-box.scss

@@ -1,9 +1,9 @@
 // Rolster Technology FieldBox Component
-// v2.1.3
+// v2.1.4
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 27/Oct/2024
+// Updated: 18/Abr/2025
 
 .rls-field-box {
   --pvt-label-opacity: 1;
@@ -18,7 +18,7 @@
   transition: height 160ms 0ms var(--rls-standard-curve);
 
   &--focused {
-    --rlc-fieldbox-body-background: var(--rls-app-background-500);
+    --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);
@@ -32,7 +32,7 @@
   }
 
   &--disabled {
-    --rlc-fieldbox-body-background: var(--rls-app-background-500);
+    --rlc-fieldbox-body-background: var(--rls-app-color-050);
     --pvt-body-opacity: 0.75;
     --pvt-label-opacity: 0.5;
   }
@@ -75,7 +75,7 @@
   }
 
   &__helper {
-    color: var(--rls-app-color-100);
+    color: var(--rls-app-color-400);
     padding: 0rem 5rem;
     box-sizing: border-box;
     font-weight: var(--rls-font-weight-medium);

package/scss/components/field-list.scss

@@ -1,14 +1,14 @@
 // Rolster Technology ListField Component
-// v1.3.5
+// v1.3.7
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 31/Mar/2025
+// Updated: 18/Abr/2025
 
 .rls-field-list {
-  --pvt-action-font-color: var(--rls-app-color-300);
-  --pvt-list-height: 0rem;
-  --pvt-list-max-height: 0rem;
+  --pvt-action-font-color: var(--rls-app-color-600);
+  --pvt-list-height: auto;
+  --pvt-list-max-height: 160rem;
   --pvt-list-opacity: 0;
   --pvt-list-transform: none;
   --pvt-backdrop-opacity: 0;
@@ -22,11 +22,11 @@
   &.rls-field-box--active {
     --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
     --rlc-fieldbox-body-border: var(--rls-theme-border-1-300);
-    --rlc-fieldbox-label-font-color: var(--rls-app-color-300);
+    --rlc-fieldbox-label-font-color: var(--rls-app-color-600);
   }
 
   &.rls-field-box--disabled {
-    --pvt-action-font-color: var(--rls-app-color-100);
+    --pvt-action-font-color: var(--rls-app-color-400);
   }
 
   &__control {
@@ -45,12 +45,12 @@
     color: var(--rlc-input-font-color);
 
     &::placeholder {
-      color: var(--rls-app-color-100);
+      color: var(--rls-app-color-400);
     }
 
     &::selection {
       background: var(--rls-theme-color-700);
-      color: var(--rls-light-color-500);
+      color: var(--rls-app-color-050);
     }
 
     &:disabled {
@@ -75,21 +75,19 @@
     bottom: initial;
     left: 0rem;
     width: 100%;
-    height: 0rem;
+    height: auto;
     max-height: var(--pvt-list-max-height);
     opacity: 0;
+    z-index: -1;
     overflow: hidden;
-    z-index: var(--rls-z-index-2);
-    padding-bottom: var(--rls-sizing-x6);
 
     &--visible {
-      --pvt-list-max-height: 160rem;
       --pvt-list-height: auto;
+      --pvt-list-max-height: 160rem;
       --pvt-list-opacity: 1;
 
       overflow: initial;
       opacity: 1;
-      height: auto;
       z-index: var(--rls-z-index-8);
     }
 
@@ -110,7 +108,7 @@
       opacity: var(--pvt-list-opacity);
       overflow: hidden;
       z-index: var(--rls-z-index-2);
-      background: var(--rls-app-background-500);
+      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);
@@ -139,7 +137,7 @@
     box-sizing: border-box;
 
     &:hover {
-      background: var(--rls-app-background-300);
+      background: var(--rls-app-color-100);
     }
 
     &:not(:hover):focus {
@@ -170,12 +168,12 @@
       label {
         display: block;
         width: 100%;
-        color: var(--rls-app-color-300);
+        color: var(--rls-app-color-600);
       }
 
       p {
         white-space: initial;
-        color: var(--rls-app-color-300);
+        color: var(--rls-app-color-600);
       }
     }
   }

package/scss/components.scss

@@ -1,20 +1,20 @@
 // Rolster Technology Components
-// v2.0.8
+// v2.1.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 13/Abr/2023
-// Updated: 25/Feb/2025
+// Updated: 18/Abr/2025
 
 @use 'sass:meta';
 
 :root {
-  --rlc-app-content-background: var(--rls-app-background-500);
-  --rlc-app-header-background: var(--rls-app-background-100);
+  --rlc-app-content-background: var(--rls-app-color-050);
+  --rlc-app-header-background: var(--rls-app-color-200);
   --rlc-app-header-height: var(--rls-sizing-x28);
-  --rlc-app-navbar-background: var(--rls-app-background-100);
+  --rlc-app-navbar-background: var(--rls-app-color-200);
   --rlc-app-navbar-width: 160rem;
 
-  --rlc-action-color: var(--rls-app-color-300);
+  --rlc-action-color: var(--rls-app-color-600);
   --rlc-action-ripple-color: var(--rlc-action-color);
   --rlc-action-ripple-dimension: var(--rls-sizing-x18);
   --rlc-action-ripple-position: -9rem;
@@ -72,7 +72,7 @@
   --rlc-fieldbox-body-shadow: none;
   --rlc-fieldbox-error-display: block;
   --rlc-fieldbox-label-display: block;
-  --rlc-fieldbox-label-font-color: var(--rls-app-color-300);
+  --rlc-fieldbox-label-font-color: var(--rls-app-color-600);
 
   --rlc-fieldlist-action-dimension: var(--rls-sizing-x12);
   --rlc-fieldlist-control-font-size: var(--rlc-input-font-size);
@@ -87,7 +87,7 @@
   --rlc-icon-color: inherit;
   --rlc-icon-dimesion: var(--rls-sizing-x12);
 
-  --rlc-input-font-color: var(--rls-app-color-500);
+  --rlc-input-font-color: var(--rls-app-color-900);
   --rlc-input-font-size: var(--rls-input-font-size);
   --rlc-input-letter-spacing: var(--rls-input-letter-spacing);
   --rlc-input-height: var(--rls-sizing-x12);
@@ -128,7 +128,7 @@
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--rls-theme-color-300) var(--rls-app-background-100);
+  scrollbar-color: var(--rls-theme-color-300) var(--rls-app-color-200);
 }
 
 @include meta.load-css('components/app');