@rolster/styles-foundations 2.4.16 → 2.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.4.16",
+  "version": "2.4.18",
   "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/data-table.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Datatable Component
-// v2.3.2
+// v2.3.5
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 18/Abr/2025
+// Updated: 06/May/2025
 
 @mixin datatable_cell_control() {
   --rlc-avatar-border-radius: var(--rls-sizing-x3);
@@ -19,6 +19,7 @@
   --rlc-fieldbox-body-shadow: none;
   --rlc-fieldbox-action-background: transparent;
 
+  --rlc-switch-max-width: var(--rls-sizing-x18);
   --rlc-switch-bar-radius: var(--rls-sizing-x2);
   --rlc-switch-bar-height: var(--rls-sizing-x4);
   --rlc-switch-element-size: var(--rls-sizing-x10);
@@ -169,22 +170,18 @@
 
     &--success {
       background: var(--rls-success-color-050);
-      border: var(--rls-success-border-1-300);
     }
 
     &--info {
       background: var(--rls-info-color-050);
-      border: var(--rls-info-border-1-300);
     }
 
     &--warning {
       background: var(--rls-warning-color-050);
-      border: var(--rls-warning-border-1-300);
     }
 
     &--error {
       background: var(--rls-danger-color-050);
-      border: var(--rls-danger-border-1-300);
     }
 
     &--overflow {
@@ -222,11 +219,7 @@
     }
 
     &.rls-align-center {
-      & > .rls-checkbox,
-      & > .rls-radiobutton,
-      & > .rls-switch {
-        margin: auto;
-      }
+      justify-content: center;
     }
 
     & > span {
@@ -271,6 +264,8 @@
   }
 
   &__floating {
+    --pvt-action-tooltip-left: 0;
+    --pvt-action-tooltip-right: initial;
     --pvt-action-tooltip-transform: translate(
       calc(-100% - var(--rls-sizing-x4))
     );
@@ -294,21 +289,23 @@
     }
 
     &--invested {
+      --pvt-action-tooltip-left: initial;
+      --pvt-action-tooltip-right: 0;
       --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-color-300);
+      transform: translateX(calc(-100% + var(--rls-sizing-x4)));
     }
 
     .rls-button-action__tooltip {
       top: 0;
-      left: 0;
+      left: var(--pvt-action-tooltip-left);
+      right: var(--pvt-action-tooltip-right);
       transform: var(--pvt-action-tooltip-transform);
+      z-index: var(--rls-z-index-2);
     }
   }
 

package/scss/components.scss

@@ -1,13 +1,13 @@
 // Rolster Technology Components
-// v2.2.0
+// v2.2.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 13/Abr/2023
-// Updated: 23/Abr/2025
+// Updated: 27/Abr/2025
 
 @use 'sass:meta';
 
-:root {
+body {
   --rlc-app-content-background: var(--rls-app-color-050);
   --rlc-app-header-background: var(--rls-app-color-100);
   --rlc-app-header-height: var(--rls-sizing-x28);
@@ -53,6 +53,9 @@
 
   --rlc-card-content-padding: var(--rls-sizing-x8);
 
+  --rlc-checkbox-dimension: var(--rls-sizing-x12);
+  --rlc-checkbox-children-dimension: 6rem;
+
   --rlc-datatable-body-max-height: initial;
   --rlc-datatable-body-overflow: initial;
   --rlc-datatable-letter-spacing: 0.0625em;
@@ -106,6 +109,9 @@
 
   --rlc-progress-circular-dimension: var(--rls-sizing-x28);
 
+  --rlc-radiobutton-dimension: var(--rls-sizing-x12);
+  --rlc-radiobutton-children-dimension: 6rem;
+
   --rlc-snackbar-left: 50%;
 
   --rlc-skeleton-height: inherit;
@@ -115,9 +121,10 @@
   --rlc-skeleton-text-height: var(--rls-body-line-height);
   --rlc-skeleton-text-letter-spacing: var(--rls-body-letter-spacing);
 
-  --rlc-switch-bar-radius: var(--rls-sizing-x3);
-  --rlc-switch-bar-height: var(--rls-sizing-x6);
-  --rlc-switch-element-size: var(--rls-sizing-x12);
+  --rlc-switch-max-width: var(--rls-sizing-x18);
+  --rlc-switch-bar-radius: var(--rls-sizing-x2);
+  --rlc-switch-bar-height: var(--rls-sizing-x4);
+  --rlc-switch-element-size: var(--rls-sizing-x10);
 
   --rlc-tabulartext-char-width: 5.5rem;
   --rlc-tabulartext-font-size: var(--rls-body-font-size);

package/scss/foundations/animations.scss

@@ -1,11 +1,11 @@
 // Rolster Technology Animations Foundations
-// v2.0.0
+// v2.0.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 26/May/2024
+// Updated: 06/May/2025
 
-:root {
+body {
   --rls-standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
 
   --rls-deceleration-curve: cubic-bezier(0, 0, 0.2, 1);

package/scss/foundations/colors.scss

@@ -1,13 +1,13 @@
 // Rolster Technology Colors Foundations
-// v2.6.2
+// v2.6.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 03/Mar/2022
-// Updated: 23/Abr/2025
+// Updated: 06/May/2025
 
 @use 'helpers' as helpers;
 
-:root {
+body {
   --rls-app-color-900: rgb(40, 50, 61);
 
   --rls-app-color-800: rgb(52, 57, 87);
@@ -28,28 +28,6 @@
 
   --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',
     #0b2446,
@@ -244,4 +222,26 @@
     #e6e4db,
     #f5f5f1
   );
+
+  &[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);
+  }
 }

package/scss/foundations/elevations.scss

@@ -1,11 +1,11 @@
 // Rolster Technology Elevations Foundations
-// v2.1.0
+// v2.1.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 18/Abr/2025
+// Updated: 06/May/2025
 
-:root {
+body {
   --rls-z-index-2: 2;
 
   --rls-z-index-4: 4;

package/scss/foundations/sizings.scss

@@ -1,11 +1,11 @@
 // Rolster Technology Sizings Foundations
-// v2.1.0
+// v2.1.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 26/May/2024
+// Updated: 06/May/2025
 
-:root {
+body {
   --rls-sizing-x1: 1rem;
 
   --rls-sizing-x2: 2rem;

package/scss/foundations/themes.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Themes Foundations
-// v2.4.1
+// v2.4.2
 // @license MIT
 // Author: Rolster Developers
 // Created: 03/Mar/2022
-// Updated: 19/Abr/2025
+// Updated: 06/May/2025
 
 @mixin rolster-border-color($theme, $token) {
   --rls-#{$theme}-border-1-#{$token}: var(--rls-border-1) solid
@@ -89,7 +89,7 @@
   @include rolster-border-theme($theme, 100);
 }
 
-:root {
+body {
   --rls-app-border-1-100: var(--rls-border-1) solid var(--rls-app-color-200);
 
   --rls-app-border-2-100: var(--rls-border-2) solid var(--rls-app-color-200);

package/scss/foundations/typographics.scss

@@ -1,11 +1,11 @@
 // Rolster Technology Typographics Foundations
-// v2.0.0
+// v2.0.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 26/May/2024
+// Updated: 06/May/2025
 
-:root {
+body {
   --rls-font-weight-thin: 100;
 
   --rls-font-weight-extra-light: 200;

package/scss/utilities/layout.scss

@@ -253,7 +253,7 @@
   }
 }
 
-:root {
+body {
   --flex-grid-12-gap: 0rem;
   --flex-grid-8-gap: 0rem;
   --flex-grid-6-gap: 0rem;

package/scss/utilities/normalize.scss

@@ -1,14 +1,13 @@
 // Rolster Technology Normalize Utilities
-// v2.0.3
+// v2.0.4
 // @license MIT
 // Author: Rolster Developers
 // Created: 11/Ago/2022
-// Updated: 23/Abr/2025
+// Updated: 06/May/2025
 
 :root {
   --rls-app-font-family: -apple-system, -rolster-system-font, BlinkMacSystemFont,
     'Segoe UI', Roboto, Helvetica;
-  --rlc-app-body-background: var(--rls-app-color-050);
 }
 
 html {
@@ -17,6 +16,8 @@ html {
 }
 
 body {
+  --rlc-app-body-background: var(--rls-app-color-050);
+
   position: absolute;
   top: 0rem;
   bottom: 0rem;