@rolster/styles-foundations 2.6.23 → 2.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.6.23",
+  "version": "2.7.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",
@@ -23,8 +23,8 @@
   },
   "devDependencies": {
     "css-minify": "^2.0.0",
-    "prettier": "^3.0.3",
-    "rimraf": "^3.0.2",
+    "prettier": "^3.1.8",
+    "rimraf": "^6.1.3",
     "rtlcss": "^4.1.0",
     "sass": "^1.89.0",
     "sass-migrator": "^2.2.1"
@@ -32,5 +32,8 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/rolster-developments/styles-foundations"
+  },
+  "engines": {
+    "node": ">=14.13"
   }
 }

package/scss/components/app.scss

@@ -1,9 +1,9 @@
 // Rolster Technology App Component
-// v2.3.7
+// v2.3.8
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 08/Nov/2025
+// Updated: 08/Abr/2026
 
 .rls-app {
   &__body {
@@ -40,7 +40,7 @@
     height: var(--pvt-header-height);
     box-sizing: border-box;
     z-index: var(--rls-z-index-8);
-    background: var(--rlc-app-header-background, var(--rls-app-color-100));
+    background: var(--rlc-app-header-background, var(--rls-app-color-050));
 
     & + .rls-app__page,
     & + .rls-app__content {

package/scss/foundations/borders.scss

@@ -1,14 +1,14 @@
-// Rolster Technology Borders Foundations
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 28/Oct/2025
-// Updated: 28/Oct/2025
-
-body {
-  --rls-app-border-1-transparent: var(--rls-border-1) solid transparent;
-
-  --rls-app-border-2-transparent: var(--rls-border-2) solid transparent;
-
-  --rls-app-border-4-transparent: var(--rls-border-4) solid transparent;
-}
+// Rolster Technology Borders Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 28/Oct/2025
+// Updated: 28/Oct/2025
+
+body {
+  --rls-app-border-1-transparent: var(--rls-border-1) solid transparent;
+
+  --rls-app-border-2-transparent: var(--rls-border-2) solid transparent;
+
+  --rls-app-border-4-transparent: var(--rls-border-4) solid transparent;
+}

package/scss/foundations/elevations.scss

@@ -1,13 +1,15 @@
 // Rolster Technology Elevations Foundations
-// v2.1.2
+// v2.1.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 24/Nov/2025
+// Updated: 08/Abr/2026
 
 body {
   --rls-app-shadow-color: rgba(173, 186, 230, 0.6);
 
+  --rls-z-index-2: 1;
+
   --rls-z-index-2: 2;
 
   --rls-z-index-4: 4;

package/scss/foundations/flex-boxs.scss

@@ -1,96 +1,96 @@
-// Rolster Technology FlexBoxs Foundations
-// v1.0.2
-// @license MIT
-// Author: Rolster Developers
-// Created: 08/Nov/2025
-// Updated: 03/Feb/2026
-
-@mixin flex_row($gap) {
-  display: flex;
-  flex-direction: row;
-  column-gap: #{$gap};
-}
-
-@mixin flex_column($gap) {
-  display: flex;
-  flex-direction: column;
-  row-gap: #{$gap};
-}
-
-.rls-flex-row-0 {
-  @include flex_row(0rem);
-}
-
-.rls-flex-row-2 {
-  @include flex_row(2rem);
-}
-
-.rls-flex-row-4 {
-  @include flex_row(4rem);
-}
-
-.rls-flex-row-8 {
-  @include flex_row(8rem);
-}
-
-.rls-flex-row-12 {
-  @include flex_row(12rem);
-}
-
-.rls-flex-row-16 {
-  @include flex_row(16rem);
-}
-
-.rls-flex-column-0 {
-  @include flex_column(0rem);
-}
-
-.rls-flex-column-2 {
-  @include flex_column(2rem);
-}
-
-.rls-flex-column-4 {
-  @include flex_column(4rem);
-}
-
-.rls-flex-column-8 {
-  @include flex_column(8rem);
-}
-
-.rls-flex-column-12 {
-  @include flex_column(12rem);
-}
-
-.rls-flex-column-16 {
-  @include flex_column(16rem);
-}
-
-.rls-flex-justify-content-start {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.rls-flex-justify-content-center {
-  display: flex;
-  justify-content: center;
-}
-
-.rls-flex-justify-content-end {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.rls-flex-align-items-start {
-  display: flex;
-  align-items: flex-start;
-}
-
-.rls-flex-align-items-center {
-  display: flex;
-  align-items: center;
-}
-
-.rls-flex-align-items-end {
-  display: flex;
-  align-items: flex-end;
-}
+// Rolster Technology FlexBoxs Foundations
+// v1.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 08/Nov/2025
+// Updated: 03/Feb/2026
+
+@mixin flex_row($gap) {
+  display: flex;
+  flex-direction: row;
+  column-gap: #{$gap};
+}
+
+@mixin flex_column($gap) {
+  display: flex;
+  flex-direction: column;
+  row-gap: #{$gap};
+}
+
+.rls-flex-row-0 {
+  @include flex_row(0rem);
+}
+
+.rls-flex-row-2 {
+  @include flex_row(2rem);
+}
+
+.rls-flex-row-4 {
+  @include flex_row(4rem);
+}
+
+.rls-flex-row-8 {
+  @include flex_row(8rem);
+}
+
+.rls-flex-row-12 {
+  @include flex_row(12rem);
+}
+
+.rls-flex-row-16 {
+  @include flex_row(16rem);
+}
+
+.rls-flex-column-0 {
+  @include flex_column(0rem);
+}
+
+.rls-flex-column-2 {
+  @include flex_column(2rem);
+}
+
+.rls-flex-column-4 {
+  @include flex_column(4rem);
+}
+
+.rls-flex-column-8 {
+  @include flex_column(8rem);
+}
+
+.rls-flex-column-12 {
+  @include flex_column(12rem);
+}
+
+.rls-flex-column-16 {
+  @include flex_column(16rem);
+}
+
+.rls-flex-justify-content-start {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.rls-flex-justify-content-center {
+  display: flex;
+  justify-content: center;
+}
+
+.rls-flex-justify-content-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.rls-flex-align-items-start {
+  display: flex;
+  align-items: flex-start;
+}
+
+.rls-flex-align-items-center {
+  display: flex;
+  align-items: center;
+}
+
+.rls-flex-align-items-end {
+  display: flex;
+  align-items: flex-end;
+}

package/scss/foundations/helpers.scss

@@ -1,115 +1,123 @@
-// Rolster Technology Helpers Foundations
-// v1.0.2
-// @license MIT
-// Author: Rolster Developers
-// Created: 18/Abr/2025
-// Updated: 29/Nov/2025
-
-@use 'sass:color' as *;
-
-@mixin rolster-theme-900($theme, $color) {
-  $r: channel($color, 'red');
-  $g: channel($color, 'green');
-  $b: channel($color, 'blue');
-
-  --rls-#{$theme}-color-900: #{$color};
-
-  --rls-#{$theme}-backdrop-900: rgba(#{$r}, #{$g}, #{$b}, 0.8);
-}
-
-@mixin rolster-theme-700($theme, $color) {
-  $r: channel($color, 'red');
-  $g: channel($color, 'green');
-  $b: channel($color, 'blue');
-
-  --rls-#{$theme}-color-700: #{$color};
-
-  --rls-#{$theme}-skeleton-500: rgba(#{$r}, #{$g}, #{$b}, 0.5);
-
-  --rls-#{$theme}-skeleton-400: rgba(#{$r}, #{$g}, #{$b}, 0.325);
-
-  --rls-#{$theme}-skeleton-300: rgba(#{$r}, #{$g}, #{$b}, 0.25);
-
-  --rls-#{$theme}-skeleton-200: rgba(#{$r}, #{$g}, #{$b}, 0.175);
-
-  --rls-#{$theme}-skeleton-100: rgba(#{$r}, #{$g}, #{$b}, 0.1);
-}
-
-@mixin rolster-theme-500($theme, $color) {
-  $r: channel($color, 'red');
-  $g: channel($color, 'green');
-  $b: channel($color, 'blue');
-
-  --rls-#{$theme}-color-500: #{$color};
-
-  --rls-#{$theme}-shadow-color-500: rgba(#{$r}, #{$g}, #{$b}, 0.24);
-
-  --rls-#{$theme}-shadow-500: 0px 0px 0px 3px var(--rls-#{$theme}-shadow-color-500);
-}
-
-@mixin rolster-theme(
-  $theme,
-  $c950,
-  $c900,
-  $c800,
-  $c700,
-  $c600,
-  $c500,
-  $c400,
-  $c300,
-  $c200,
-  $c100,
-  $c050
-) {
-  --rls-#{$theme}-color-950: #{$c950};
-
-  @include rolster-theme-900($theme, $c900);
-
-  --rls-#{$theme}-color-800: #{$c800};
-
-  @include rolster-theme-700($theme, $c700);
-
-  --rls-#{$theme}-color-600: #{$c600};
-
-  @include rolster-theme-500($theme, $c500);
-
-  --rls-#{$theme}-color-400: #{$c400};
-
-  --rls-#{$theme}-color-300: #{$c300};
-
-  --rls-#{$theme}-color-200: #{$c200};
-
-  --rls-#{$theme}-color-100: #{$c100};
-
-  --rls-#{$theme}-color-050: #{$c050};
-
-  --rls-#{$theme}-gradient-700: linear-gradient(
-    180deg,
-    var(--rls-#{$theme}-color-700) 15%,
-    var(--rls-#{$theme}-color-800) 85%
-  );
-
-  --rls-#{$theme}-gradient-600: linear-gradient(
-    180deg,
-    var(--rls-#{$theme}-color-600) 15%,
-    var(--rls-#{$theme}-color-700) 85%
-  );
-
-  --rls-#{$theme}-gradient-500: linear-gradient(
-    180deg,
-    var(--rls-#{$theme}-color-500) 15%,
-    var(--rls-#{$theme}-color-600) 85%
-  );
-
-  --rls-#{$theme}-gradient-400: linear-gradient(
-    180deg,
-    var(--rls-#{$theme}-color-400) 15%,
-    var(--rls-#{$theme}-color-500) 85%
-  );
-
-  --rls-#{$theme}-gradient-300: linear-gradient(
-    180deg,
-    var(--rls-#{$theme}-color-300) 15%,
-    var(--rls-#{$theme}-color-400) 85%
-  );
-}
+// Rolster Technology Helpers Foundations
+// v1.0.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 18/Abr/2025
+// Updated: 08/Abr/2026
+
+@use 'sass:color' as *;
+
+@mixin rolster-theme-900($theme, $color) {
+  $r: channel($color, 'red');
+  $g: channel($color, 'green');
+  $b: channel($color, 'blue');
+
+  --rls-#{$theme}-color-900: #{$color};
+
+  --rls-#{$theme}-backdrop-900: rgba(#{$r}, #{$g}, #{$b}, 0.9);
+  --rls-#{$theme}-backdrop-800: rgba(#{$r}, #{$g}, #{$b}, 0.8);
+  --rls-#{$theme}-backdrop-700: rgba(#{$r}, #{$g}, #{$b}, 0.7);
+  --rls-#{$theme}-backdrop-600: rgba(#{$r}, #{$g}, #{$b}, 0.6);
+  --rls-#{$theme}-backdrop-500: rgba(#{$r}, #{$g}, #{$b}, 0.5);
+  --rls-#{$theme}-backdrop-400: rgba(#{$r}, #{$g}, #{$b}, 0.4);
+  --rls-#{$theme}-backdrop-300: rgba(#{$r}, #{$g}, #{$b}, 0.3);
+  --rls-#{$theme}-backdrop-200: rgba(#{$r}, #{$g}, #{$b}, 0.2);
+  --rls-#{$theme}-backdrop-100: rgba(#{$r}, #{$g}, #{$b}, 0.1);
+}
+
+@mixin rolster-theme-700($theme, $color) {
+  $r: channel($color, 'red');
+  $g: channel($color, 'green');
+  $b: channel($color, 'blue');
+
+  --rls-#{$theme}-color-700: #{$color};
+
+  --rls-#{$theme}-skeleton-500: rgba(#{$r}, #{$g}, #{$b}, 0.5);
+
+  --rls-#{$theme}-skeleton-400: rgba(#{$r}, #{$g}, #{$b}, 0.325);
+
+  --rls-#{$theme}-skeleton-300: rgba(#{$r}, #{$g}, #{$b}, 0.25);
+
+  --rls-#{$theme}-skeleton-200: rgba(#{$r}, #{$g}, #{$b}, 0.175);
+
+  --rls-#{$theme}-skeleton-100: rgba(#{$r}, #{$g}, #{$b}, 0.1);
+}
+
+@mixin rolster-theme-500($theme, $color) {
+  $r: channel($color, 'red');
+  $g: channel($color, 'green');
+  $b: channel($color, 'blue');
+
+  --rls-#{$theme}-color-500: #{$color};
+
+  --rls-#{$theme}-shadow-color-500: rgba(#{$r}, #{$g}, #{$b}, 0.24);
+
+  --rls-#{$theme}-shadow-500: 0px 0px 0px 3px var(--rls-#{$theme}-shadow-color-500);
+}
+
+@mixin rolster-theme(
+  $theme,
+  $c950,
+  $c900,
+  $c800,
+  $c700,
+  $c600,
+  $c500,
+  $c400,
+  $c300,
+  $c200,
+  $c100,
+  $c050
+) {
+  --rls-#{$theme}-color-950: #{$c950};
+
+  @include rolster-theme-900($theme, $c900);
+
+  --rls-#{$theme}-color-800: #{$c800};
+
+  @include rolster-theme-700($theme, $c700);
+
+  --rls-#{$theme}-color-600: #{$c600};
+
+  @include rolster-theme-500($theme, $c500);
+
+  --rls-#{$theme}-color-400: #{$c400};
+
+  --rls-#{$theme}-color-300: #{$c300};
+
+  --rls-#{$theme}-color-200: #{$c200};
+
+  --rls-#{$theme}-color-100: #{$c100};
+
+  --rls-#{$theme}-color-050: #{$c050};
+
+  --rls-#{$theme}-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-#{$theme}-color-700) 15%,
+    var(--rls-#{$theme}-color-800) 85%
+  );
+
+  --rls-#{$theme}-gradient-600: linear-gradient(
+    180deg,
+    var(--rls-#{$theme}-color-600) 15%,
+    var(--rls-#{$theme}-color-700) 85%
+  );
+
+  --rls-#{$theme}-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-#{$theme}-color-500) 15%,
+    var(--rls-#{$theme}-color-600) 85%
+  );
+
+  --rls-#{$theme}-gradient-400: linear-gradient(
+    180deg,
+    var(--rls-#{$theme}-color-400) 15%,
+    var(--rls-#{$theme}-color-500) 85%
+  );
+
+  --rls-#{$theme}-gradient-300: linear-gradient(
+    180deg,
+    var(--rls-#{$theme}-color-300) 15%,
+    var(--rls-#{$theme}-color-400) 85%
+  );
+}