@rolster/styles-foundations 2.7.2 → 3.0.0

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,123 +1,123 @@
-// 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%
-  );
-}
+// 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%
+  );
+}

package/scss/foundations/sizings.scss

@@ -14,10 +14,16 @@ body {
 
   --rls-sizing-x4: 4rem;
 
+  --rls-sizing-x5: 4rem;
+
   --rls-sizing-x6: 6rem;
 
+  --rls-sizing-x7: 4rem;
+
   --rls-sizing-x8: 8rem;
 
+  --rls-sizing-x9: 8rem;
+
   --rls-sizing-x10: 10rem;
 
   --rls-sizing-x12: 12rem;