@rolster/styles-foundations 1.0.1 → 1.0.5

package/scss/foundations/_themes-foundations.scss

@@ -1,103 +1,122 @@
-// Rolster Technology Themes Foundations
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 03/Mar/2022
-// Updated: 14/Abr/2023
-
-@mixin border-theme-rolster($token, $color) {
-  --border-1-rolster-#{$token}: var(--border-1) solid
-    var(--color-#{$color}-#{$token});
-
-  --border-2-rolster-#{$token}: var(--border-2) solid
-    var(--color-#{$color}-#{$token});
-
-  --border-4-rolster-#{$token}: var(--border-4) solid
-    var(--color-#{$color}-#{$token});
-}
-
-@mixin theme-rolster($color) {
-  --color-rolster-900: var(--color-#{$color}-900);
-
-  --color-rolster-700: var(--color-#{$color}-700);
-
-  --color-rolster-500: var(--color-#{$color}-500);
-
-  --color-rolster-300: var(--color-#{$color}-300);
-
-  --color-rolster-100: var(--color-#{$color}-100);
-
-  --skeleton-rolster-500: var(--skeleton-#{$color}-500);
-
-  --skeleton-rolster-300: var(--skeleton-#{$color}-300);
-
-  --skeleton-rolster-100: var(--skeleton-#{$color}-100);
-
-  @include border-theme-rolster(900, $color);
-  @include border-theme-rolster(700, $color);
-  @include border-theme-rolster(500, $color);
-  @include border-theme-rolster(300, $color);
-  @include border-theme-rolster(100, $color);
-
-  --box-shadow-rolster-500: var(--box-shadow-#{$color}-500);
-
-  --backdrop-rolster-500: var(--backdrop-#{$color}-500);
-
-  --gradient-rolster-500: var(--gradient-#{$color}-500);
-}
-
-@mixin border-theme($theme, $token) {
-  --border-1-theme-#{$token}: var(--border-1) solid
-    var(--border-#{$theme}-#{$token});
-
-  --border-2-theme-#{$token}: var(--border-2) solid
-    var(--border-#{$theme}-#{$token});
-
-  --border-4-theme-#{$token}: var(--border-4) solid
-    var(--border-#{$theme}-#{$token});
-}
-
-:root {
-  --background-theme-500: var(--background-light-500);
-
-  --background-theme-300: var(--background-light-300);
-
-  --background-theme-100: var(--background-light-100);
-
-  --color-theme-500: var(--color-dark-500);
-
-  --color-theme-300: var(--color-dark-300);
-
-  --color-theme-100: var(--color-dark-100);
-
-  --border-theme-500: var(--border-dark-500);
-
-  --border-theme-300: var(--border-dark-300);
-
-  --border-theme-100: var(--border-dark-100);
-
-  @include border-theme('dark', 500);
-  @include border-theme('dark', 300);
-  @include border-theme('dark', 100);
-  @include theme-rolster('base');
-}
-
-*[rls-theme='success'] {
-  @include theme-rolster('success');
-}
-
-*[rls-theme='info'] {
-  @include theme-rolster('info');
-}
-
-*[rls-theme='happy'] {
-  @include theme-rolster('happy');
-}
-
-*[rls-theme='warning'] {
-  @include theme-rolster('warning');
-}
-
-*[rls-theme='danger'] {
-  @include theme-rolster('danger');
-}
+// Rolster Technology Themes Foundations
+// v1.1.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Mar/2022
+// Updated: 29/Sep/2023
+
+@mixin border-theme($theme, $token) {
+  --border-1-theme-#{$token}: var(--border-1) solid
+    var(--border-#{$theme}-#{$token});
+
+  --border-2-theme-#{$token}: var(--border-2) solid
+    var(--border-#{$theme}-#{$token});
+
+  --border-4-theme-#{$token}: var(--border-4) solid
+    var(--border-#{$theme}-#{$token});
+}
+
+@mixin border-rolster-theme($token, $color) {
+  --border-1-rolster-#{$token}: var(--border-1) solid
+    var(--color-#{$color}-#{$token});
+
+  --border-2-rolster-#{$token}: var(--border-2) solid
+    var(--color-#{$color}-#{$token});
+
+  --border-4-rolster-#{$token}: var(--border-4) solid
+    var(--color-#{$color}-#{$token});
+}
+
+@mixin rolster-theme($color) {
+  --color-rolster-900: var(--color-#{$color}-900);
+
+  --color-rolster-700: var(--color-#{$color}-700);
+
+  --color-rolster-500: var(--color-#{$color}-500);
+
+  --color-rolster-300: var(--color-#{$color}-300);
+
+  --color-rolster-100: var(--color-#{$color}-100);
+
+  --skeleton-rolster-500: var(--skeleton-#{$color}-500);
+
+  --skeleton-rolster-300: var(--skeleton-#{$color}-300);
+
+  --skeleton-rolster-100: var(--skeleton-#{$color}-100);
+
+  @include border-rolster-theme(900, $color);
+  @include border-rolster-theme(700, $color);
+  @include border-rolster-theme(500, $color);
+  @include border-rolster-theme(300, $color);
+  @include border-rolster-theme(100, $color);
+
+  --box-shadow-rolster-500: var(--box-shadow-#{$color}-500);
+
+  --backdrop-rolster-500: var(--backdrop-#{$color}-500);
+
+  --gradient-rolster-500: var(--gradient-#{$color}-500);
+}
+
+@mixin shadow-theme($theme, $token) {
+  --shadow-#{$token}-theme-2: var(--shadow-#{$token}-#{$theme}-2);
+
+  --shadow-#{$token}-theme-4: var(--shadow-#{$token}-#{$theme}-4);
+
+  --shadow-#{$token}-theme-8: var(--shadow-#{$token}-#{$theme}-8);
+
+  --shadow-#{$token}-theme-16: var(--shadow-#{$token}-#{$theme}-16);
+
+  --shadow-#{$token}-theme-24: var(--shadow-#{$token}-#{$theme}-24);
+
+  --shadow-#{$token}-theme-32: var(--shadow-#{$token}-#{$theme}-32);
+}
+
+:root {
+  --background-theme-500: var(--background-light-500);
+
+  --background-theme-300: var(--background-light-300);
+
+  --background-theme-100: var(--background-light-100);
+
+  --color-theme-500: var(--color-dark-500);
+
+  --color-theme-300: var(--color-dark-300);
+
+  --color-theme-100: var(--color-dark-100);
+
+  --border-theme-500: var(--border-dark-500);
+
+  --border-theme-300: var(--border-dark-300);
+
+  --border-theme-100: var(--border-dark-100);
+
+  @include border-theme('dark', 500);
+  @include border-theme('dark', 300);
+  @include border-theme('dark', 100);
+  @include rolster-theme('base');
+  @include shadow-theme('light', 'bottom');
+  @include shadow-theme('light', 'top');
+  @include shadow-theme('light', 'right');
+  @include shadow-theme('light', 'left');
+  @include shadow-theme('light', 'center');
+}
+
+*[rls-theme='success'] {
+  @include rolster-theme('success');
+}
+
+*[rls-theme='info'] {
+  @include rolster-theme('info');
+}
+
+*[rls-theme='happy'] {
+  @include rolster-theme('happy');
+}
+
+*[rls-theme='warning'] {
+  @include rolster-theme('warning');
+}
+
+*[rls-theme='danger'] {
+  @include rolster-theme('danger');
+}

package/scss/utilities/_colors-utilities.scss

@@ -1,54 +1,54 @@
-// Rolster Technology Colors Utilities
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 13/Abr/2023
-// Updated: 13/Abr/2023
-
-.font-dark-500 {
-  color: var(--color-dark-500);
-}
-
-.font-dark-300 {
-  color: var(--color-dark-300);
-}
-
-.font-dark-100 {
-  color: var(--color-dark-100);
-}
-
-.font-light-500 {
-  color: var(--color-light-500);
-}
-
-.font-light-300 {
-  color: var(--color-light-300);
-}
-
-.font-light-100 {
-  color: var(--color-light-100);
-}
-
-.bg-dark-500 {
-  background: var(--background-dark-500);
-}
-
-.bg-dark-300 {
-  background: var(--background-dark-300);
-}
-
-.bg-dark-100 {
-  background: var(--background-dark-100);
-}
-
-.bg-light-500 {
-  background: var(--background-light-500);
-}
-
-.bg-light-300 {
-  background: var(--background-light-300);
-}
-
-.bg-light-100 {
-  background: var(--background-light-100);
-}
+// Rolster Technology Colors Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 13/Abr/2023
+// Updated: 13/Abr/2023
+
+.font-dark-500 {
+  color: var(--color-dark-500);
+}
+
+.font-dark-300 {
+  color: var(--color-dark-300);
+}
+
+.font-dark-100 {
+  color: var(--color-dark-100);
+}
+
+.font-light-500 {
+  color: var(--color-light-500);
+}
+
+.font-light-300 {
+  color: var(--color-light-300);
+}
+
+.font-light-100 {
+  color: var(--color-light-100);
+}
+
+.bg-dark-500 {
+  background: var(--background-dark-500);
+}
+
+.bg-dark-300 {
+  background: var(--background-dark-300);
+}
+
+.bg-dark-100 {
+  background: var(--background-dark-100);
+}
+
+.bg-light-500 {
+  background: var(--background-light-500);
+}
+
+.bg-light-300 {
+  background: var(--background-light-300);
+}
+
+.bg-light-100 {
+  background: var(--background-light-100);
+}

package/scss/utilities/_helpers-utilities.scss

@@ -0,0 +1,124 @@
+// Rolster Technology Helpers Utilities
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Sep/2023
+// Updated: 23/Sep/2023
+
+@mixin padding($size) {
+  .pdg-top-#{$size} {
+    padding-top: var(--sizing-#{$size});
+  }
+
+  .pdg-rgt-#{$size} {
+    padding-right: var(--sizing-#{$size});
+  }
+
+  .pdg-bot-#{$size} {
+    padding-bottom: var(--sizing-#{$size});
+  }
+
+  .pdg-lft-#{$size} {
+    padding-left: var(--sizing-#{$size});
+  }
+
+  .pdg-hrz-#{$size} {
+    padding: 0rem var(--sizing-#{$size});
+  }
+
+  .pdg-vrt-#{$size} {
+    padding: var(--sizing-#{$size}) 0rem;
+  }
+
+  .pdg-#{$size} {
+    padding: var(--sizing-#{$size});
+  }
+}
+
+@mixin padding-box-sizing($size) {
+  .pdx-top-#{$size} {
+    padding-top: var(--sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .pdx-rgt-#{$size} {
+    padding-right: var(--sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .pdx-bot-#{$size} {
+    padding-bottom: var(--sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .pdx-lft-#{$size} {
+    padding-left: var(--sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .pdx-hrz-#{$size} {
+    padding: 0rem var(--sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .pdx-vrt-#{$size} {
+    padding: var(--sizing-#{$size}) 0rem;
+    box-sizing: border-box;
+  }
+
+  .pdx-#{$size} {
+    padding: var(--sizing-#{$size});
+    box-sizing: border-box;
+  }
+}
+
+@mixin margin($size) {
+  .mrg-top-#{$size} {
+    margin-top: var(--sizing-#{$size});
+  }
+
+  .mrg-rgt-#{$size} {
+    margin-right: var(--sizing-#{$size});
+  }
+
+  .mrg-bot-#{$size} {
+    margin-bottom: var(--sizing-#{$size});
+  }
+
+  .mrg-lft-#{$size} {
+    margin-left: var(--sizing-#{$size});
+  }
+
+  .mrg-hrz-#{$size} {
+    margin: 0rem var(--sizing-#{$size});
+  }
+
+  .mrg-vrt-#{$size} {
+    margin: var(--sizing-#{$size}) 0rem;
+  }
+
+  .mrg-#{$size} {
+    margin: var(--sizing-#{$size});
+  }
+}
+
+@include padding('4');
+@include padding('8');
+@include padding('12');
+@include padding('16');
+@include padding('24');
+@include padding('36');
+
+@include padding-box-sizing('4');
+@include padding-box-sizing('8');
+@include padding-box-sizing('12');
+@include padding-box-sizing('16');
+@include padding-box-sizing('24');
+@include padding-box-sizing('36');
+
+@include margin('4');
+@include margin('8');
+@include margin('12');
+@include margin('16');
+@include margin('24');
+@include margin('36');