@rolster/styles-foundations 2.6.8 → 2.6.10

package/package.json

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

@@ -1,11 +1,11 @@
 // Rolster Technology Datatable Component
-// v2.6.2
+// v2.6.6
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 13/Nov/2025
+// Updated: 16/Dic/2025
 
-@mixin datatable_cell() {
+@mixin datatable_cell_vars() {
   --rlc-field-box-body-background: transparent;
   --rlc-field-box-body-background-focused: transparent;
   --rlc-field-box-body-background-disabled: transparent;
@@ -60,9 +60,61 @@
   }
 }
 
+@mixin datatable_cell_styles() {
+  &--contained {
+    overflow: hidden;
+  }
+
+  &--control {
+    @include datatable_cell_control();
+  }
+
+  &.rls-align-center {
+    justify-content: center;
+  }
+
+  & > span {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  & > p {
+    padding: var(--rls-sizing-x2) 0rem;
+  }
+
+  .rls-field-list {
+    --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
+    --rlc-field-box-action-dimension: var(--rls-sizing-x10);
+  }
+
+  .rls-poster {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  & > a {
+    &:hover {
+      color: var(--rls-app-color-700);
+      text-decoration: underline;
+    }
+  }
+}
+
 .rls-datatable {
-  --pvt-datatable-letter-spacing: var(--rlc-datatable-letter-spacing, 0.0625em);
-  --pvt-datatable-font-size: var(--rlc-datatable-font-size, 7rem);
+  --pvt-datatable-font-size: var(
+    --rlc-datatable-font-size,
+    var(--rls-label-font-size)
+  );
+
+  --pvt-datatable-letter-spacing: var(
+    --rlc-datatable-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+
   --pvt-datatable-font-color: var(
     --rlc-datatable-font-color,
     var(--rls-app-color-900)
@@ -111,6 +163,7 @@
   position: relative;
   display: flex;
   width: 100%;
+  height: var(--rlc-datatable-height, auto);
   flex-direction: column;
   row-gap: var(--rls-sizing-x6);
   border-radius: var(--rls-sizing-x4);
@@ -128,16 +181,9 @@
       calc(var(--pvt-datatable-padding-scroll) + 5rem) 0rem 0rem;
   }
 
-  & > table {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--rls-sizing-x4);
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-
   &__toolbar {
     display: flex;
+    flex: 0 0 auto;
     column-gap: var(--rls-sizing-x6);
     padding: var(--pvt-datatable-padding-component);
     box-sizing: border-box;
@@ -145,6 +191,19 @@
     border-radius: var(--rls-sizing-x4);
   }
 
+  &__table {
+    display: flex;
+    flex: 1 1 auto;
+
+    & > table {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--rls-sizing-x4);
+      border-spacing: 0;
+      border-collapse: collapse;
+    }
+  }
+
   &__head {
     width: 100%;
     padding-right: var(--pvt-datatable-header-padding-right);
@@ -262,7 +321,7 @@
 
   &__cell,
   &__data {
-    @include datatable_cell();
+    @include datatable_cell_vars();
 
     position: relative;
     display: flex;
@@ -275,47 +334,7 @@
     font-size: var(--pvt-datatable-font-size);
     letter-spacing: var(--pvt-datatable-letter-spacing);
 
-    &--contained {
-      overflow: hidden;
-    }
-
-    &--control {
-      @include datatable_cell_control();
-    }
-
-    &.rls-align-center {
-      justify-content: center;
-    }
-
-    & > span {
-      display: block;
-      width: 100%;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    & > p {
-      padding: var(--rls-sizing-x2) 0rem;
-    }
-
-    .rls-field-list {
-      --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
-      --rlc-field-box-action-dimension: var(--rls-sizing-x10);
-    }
-
-    .rls-poster {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    & > a {
-      &:hover {
-        color: var(--rls-app-color-700);
-        text-decoration: underline;
-      }
-    }
+    @include datatable_cell_styles();
   }
 
   &__floating {
@@ -371,6 +390,7 @@
   &__summary {
     --pvt-datatable-record-background: var(--rls-app-color-100);
 
+    flex: 0 0 auto;
     padding-right: var(--pvt-datatable-header-padding-right);
     box-sizing: border-box;
   }
@@ -379,6 +399,7 @@
     --pvt-datatable-record-background: var(--rls-app-color-100);
 
     position: relative;
+    flex: 0 0 auto;
     width: 100%;
     padding: var(--pvt-datatable-padding-component);
     box-sizing: border-box;

package/scss/utilities/layout.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Layout Utilities
-// v2.1.2
+// v2.1.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 11/Abr/2023
-// Updated: 13/Nov/2025
+// Updated: 04/Dic/2025
 
 @mixin grid-responsive($size) {
   .#{$size}-grid-8 {
@@ -56,17 +56,20 @@
     --flex-grid-12-col-2: 3.4rem;
     --flex-grid-12-col-3: 3.1rem;
     --flex-grid-12-col-4: 2.8rem;
+    --flex-grid-12-col-5: 2.8rem;
     --flex-grid-12-col-6: 2.18rem;
     --flex-grid-12-col-8: 3rem;
 
     --flex-grid-8-col-2: 3.1rem;
     --flex-grid-8-col-3: 2.6rem;
     --flex-grid-8-col-4: 2.2rem;
+    --flex-grid-8-col-5: 2.2rem;
     --flex-grid-8-col-6: 1.8rem;
 
     --flex-grid-6-col-2: 2.82rem;
     --flex-grid-6-col-3: 2.2rem;
     --flex-grid-6-col-4: 1.7rem;
+    --flex-grid-6-col-5: 1.7rem;
 
     --flex-grid-4-col-2: 2rem;
     --flex-grid-4-col-3: 1rem;
@@ -85,17 +88,20 @@
     --flex-grid-12-col-2: 6.624rem;
     --flex-grid-12-col-3: 6rem;
     --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-5: 5.38rem;
     --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
 
     --flex-grid-8-col-2: 6.182rem;
     --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
+    --flex-grid-8-col-5: 4rem;
     --flex-grid-8-col-6: 2.2rem;
 
     --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
     --flex-grid-6-col-4: 2.84rem;
+    --flex-grid-6-col-5: 2.84rem;
 
     --flex-grid-4-col-2: 4rem;
     --flex-grid-4-col-3: 2.2rem;
@@ -114,17 +120,20 @@
     --flex-grid-12-col-2: 6.66rem;
     --flex-grid-12-col-3: 6rem;
     --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-5: 5.38rem;
     --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
 
     --flex-grid-8-col-2: 6.182rem;
     --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
+    --flex-grid-8-col-5: 4rem;
     --flex-grid-8-col-6: 2.2rem;
 
     --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
     --flex-grid-6-col-4: 2.84rem;
+    --flex-grid-6-col-5: 2.84rem;
 
     --flex-grid-4-col-2: 4rem;
     --flex-grid-4-col-3: 2.2rem;
@@ -179,6 +188,10 @@
         width: calc(66.67% - var(--flex-grid-6-col-4));
       }
 
+      &.#{$size}-flex-col-5 {
+        width: calc(83.34% - var(--flex-grid-6-col-5));
+      }
+
       &.#{$size}-flex-col-6,
       &.#{$size}-flex-col-8,
       &.#{$size}-flex-col-12 {
@@ -207,6 +220,10 @@
         width: calc(50% - var(--flex-grid-8-col-4));
       }
 
+      &.#{$size}-flex-col-5 {
+        width: calc(62.75% - var(--flex-grid-8-col-5));
+      }
+
       &.#{$size}-flex-col-6 {
         width: calc(75% - var(--flex-grid-8-col-6));
       }
@@ -238,6 +255,10 @@
         width: calc(33.33% - var(--flex-grid-12-col-4));
       }
 
+      &.#{$size}-flex-col-5 {
+        width: calc(41.66% - var(--flex-grid-12-col-5));
+      }
+
       &.#{$size}-flex-col-6 {
         width: calc(50% - var(--flex-grid-12-col-6));
       }

package/scss/utilities/typographics.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Typographics Utilities
-// v2.1.2
+// v2.1.4
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 18/Sep/2025
+// Updated: 03/Dic/2025
 
 @mixin typographic($name, $key) {
   .rls-#{$name}-default {
@@ -38,68 +38,76 @@
   --rls-app-font-size: 2px;
 
   --rls-heading1-font-size: 16rem;
-  --rls-heading1-letter-spacing: 0.0234375em;
-  --rls-heading1-line-height: 18.25rem;
+  --rls-heading1-letter-spacing: 0.0135rem;
+  --rls-heading1-line-height: 17.5rem;
 
-  --rls-heading2-font-size: 14.45rem;
-  --rls-heading2-letter-spacing: 0.0234375em;
-  --rls-heading2-line-height: 15.75rem;
+  --rls-heading2-font-size: 14.75rem;
+  --rls-heading2-letter-spacing: 0.0135rem;
+  --rls-heading2-line-height: 16rem;
 
-  --rls-heading3-font-size: 13.45rem;
-  --rls-heading3-letter-spacing: 0.0234375em;
-  --rls-heading3-line-height: 14.75rem;
+  --rls-heading3-font-size: 13.525rem;
+  --rls-heading3-letter-spacing: 0.0135rem;
+  --rls-heading3-line-height: 15rem;
 
-  --rls-heading4-font-size: 12rem;
-  --rls-heading4-letter-spacing: 0.0234375em;
-  --rls-heading4-line-height: 13.25rem;
+  --rls-heading4-font-size: 12.125rem;
+  --rls-heading4-letter-spacing: 0.0135rem;
+  --rls-heading4-line-height: 13.5rem;
 
   --rls-heading5-font-size: 11rem;
-  --rls-heading5-letter-spacing: 0.0234375em;
-  --rls-heading5-line-height: 12.75rem;
+  --rls-heading5-letter-spacing: 0.0135rem;
+  --rls-heading5-line-height: 12.125rem;
 
   --rls-heading6-font-size: 10rem;
-  --rls-heading6-letter-spacing: 0.0234375em;
-  --rls-heading6-line-height: 11.25rem;
+  --rls-heading6-letter-spacing: 0.0135rem;
+  --rls-heading6-line-height: 11rem;
 
-  --rls-title-font-size: 9rem;
-  --rls-title-letter-spacing: 0.0546875em;
-  --rls-title-line-height: 10rem;
+  --rls-title-font-size: 9.25rem;
+  --rls-title-letter-spacing: 0.0375rem;
+  --rls-title-line-height: 10.25rem;
 
   --rls-subtitle-font-size: 8.75rem;
-  --rls-subtitle-letter-spacing: 0.0546875em;
-  --rls-subtitle-line-height: 8.95rem;
+  --rls-subtitle-letter-spacing: 0.0375rem;
+  --rls-subtitle-line-height: 9.75rem;
 
   --rls-body-font-size: 8rem;
-  --rls-body-letter-spacing: 0.03125em;
+  --rls-body-letter-spacing: 0.0125rem;
   --rls-body-line-height: 9rem;
 
-  --rls-paragraph-font-size: 7.25rem;
+  --rls-input-font-size: 7.65rem;
+  --rls-input-letter-spacing: 0.0125rem;
+  --rls-input-line-height: 8.125rem;
+
+  --rls-paragraph-font-size: 7.325rem;
   --rls-paragraph-letter-spacing: 0.02625em;
   --rls-paragraph-line-height: 8rem;
 
-  --rls-input-font-size: 7.65rem;
-  --rls-input-letter-spacing: 0.03125em;
-  --rls-input-line-height: 9rem;
+  --rls-button-font-size: 7rem;
+  --rls-button-letter-spacing: 0.0125rem;
+  --rls-button-line-height: 7.875rem;
 
   --rls-label-font-size: 7rem;
-  --rls-label-letter-spacing: 0.03125em;
-  --rls-label-line-height: 8.25rem;
+  --rls-label-letter-spacing: 0.0125rem;
+  --rls-label-line-height: 7.875rem;
 
-  --rls-button-font-size: 7.125rem;
-  --rls-button-letter-spacing: 0.05725em;
-  --rls-button-line-height: 8.5rem;
+  --rls-span-font-size: 6.425rem;
+  --rls-span-letter-spacing: 0.0175rem;
+  --rls-span-line-height: 7.5rem;
 
-  --rls-smalltext-font-size: 6rem;
-  --rls-smalltext-letter-spacing: 0.03125em;
-  --rls-smalltext-line-height: 8.5rem;
+  --rls-smalltext-font-size: 6.125rem;
+  --rls-smalltext-letter-spacing: 0.0125rem;
+  --rls-smalltext-line-height: 7.125rem;
 
-  --rls-caption-font-size: 5.75rem;
-  --rls-caption-letter-spacing: 0.046875em;
-  --rls-caption-line-height: 7.25rem;
+  --rls-caption-font-size: 5.575rem;
+  --rls-caption-letter-spacing: 0.0275rem;
+  --rls-caption-line-height: 6.25rem;
 
-  --rls-overline-font-size: 5.35rem;
-  --rls-overline-letter-spacing: 0.0625em;
-  --rls-overline-line-height: 7.25rem;
+  --rls-overline-font-size: 5.125rem;
+  --rls-overline-letter-spacing: 0.0425rem;
+  --rls-overline-line-height: 5.825rem;
+
+  --rls-tiny-font-size: 4.325rem;
+  --rls-tiny-letter-spacing: 0.0425rem;
+  --rls-tiny-line-height: 5rem;
 }
 
 h1 {
@@ -167,8 +175,8 @@ button {
 @include typographic('title', 'title');
 @include typographic('subtitle', 'subtitle');
 @include typographic('body', 'body');
-@include typographic('paragraph', 'paragraph');
 @include typographic('input', 'input');
+@include typographic('paragraph', 'paragraph');
 @include typographic('label', 'label');
 @include typographic('button', 'button');
 @include typographic('smalltext', 'smalltext');