@rolster/styles-foundations 1.1.14 → 2.2.0

package/scss/_rolster-components.scss

@@ -1,81 +1,82 @@
 // Rolster Technology Components
-// v1.2.1
+// v2.0.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 13/Abr/2023
-// Updated: 23/Abr/2024
+// Updated: 02/Jun/2024
 
 :root {
-  --rls-action-color: var(--color-theme-300);
-  --rls-action-ripple-color: var(--rls-action-color);
-  --rls-action-ripple-dimension: var(--sizing-x18);
-  --rls-action-ripple-position: -9rem;
-
-  --rls-avatar-font-size: var(--title-font-size);
-  --rls-avatar-border-radius: var(--sizing-x4);
-  --rls-avatar-width: var(--sizing-x24);
-  --rls-avatar-height: var(--sizing-x24);
-
-  --rls-amount-text-align: start;
-
-  --rls-ballot-subtitle-width: 100%;
-  --rls-ballot-subtitle-height: var(--smalltext-line-height);
-  --rls-ballot-subtitle-overflow: initial;
-  --rls-ballot-subtitle-text-overflow: initial;
-  --rls-ballot-subtitle-white-space: initial;
-
-  --rls-boxfield-body-padding: 0rem;
-  --rls-boxfield-body-border: var(--border-1-theme-100);
-  --rls-boxfield-body-shadow: none;
-  --rls-boxfield-label-font-color: var(--color-theme-300);
-
-  --rls-breadcrumb-height: var(--sizing-x18);
-
-  --rls-button-label-text-transform: uppercase;
-  --rls-button-content-padding: 0rem var(--sizing-x4);
-  --rls-button-content-radius: var(--sizing-x2);
-
-  --rls-card-content-padding: var(--sizing-x8);
-
-  --rls-datatable-letter-spacing: 0.0625em;
-  --rls-datatable-font-size: 7rem;
-  --rls-datatable-width-scroll: var(--sizing-x4);
-  --rls-datatable-padding-scroll: 0rem;
-
-  --rls-form-footer-justify-content: end;
-
-  --rls-icon-font-size: var(--sizing-x12);
-  --rls-icon-width: var(--sizing-x12);
-  --rls-icon-height: var(--sizing-x12);
-  --rls-icon-color: inherit;
-
-  --rls-input-font-color: var(--color-theme-500);
-  --rls-input-font-size: var(--input-font-size);
-  --rls-input-text-align: left;
-  --rls-input-letter-spacing: var(--input-letter-spacing);
-  --rls-input-height: var(--sizing-x12);
-  --rls-input-parent-padding: 0rem;
-
-  --rls-poster-height: var(--sizing-x18);
-  --rls-poster-padding: var(--sizing-x4);
+  --rlc-action-color: var(--rls-app-color-300);
+  --rlc-action-ripple-color: var(--rlc-action-color);
+  --rlc-action-ripple-dimension: var(--rls-sizing-x18);
+  --rlc-action-ripple-position: -9rem;
+
+  --rlc-avatar-font-size: var(--rls-title-font-size);
+  --rlc-avatar-border-radius: var(--rls-sizing-x4);
+  --rlc-avatar-width: var(--rls-sizing-x24);
+  --rlc-avatar-height: var(--rls-sizing-x24);
+
+  --rlc-amount-text-align: start;
+
+  --rlc-ballot-subtitle-width: 100%;
+  --rlc-ballot-subtitle-height: var(--rls-smalltext-line-height);
+  --rlc-ballot-subtitle-overflow: initial;
+  --rlc-ballot-subtitle-text-overflow: initial;
+  --rlc-ballot-subtitle-white-space: initial;
+
+  --rlc-boxfield-body-padding: 0rem;
+  --rlc-boxfield-body-background: rgba(255, 255, 255, 1);
+  --rlc-boxfield-body-border: var(--rls-app-border-1-100);
+  --rlc-boxfield-body-shadow: none;
+  --rlc-boxfield-label-font-color: var(--rls-app-color-300);
+
+  --rlc-breadcrumb-height: var(--rls-sizing-x18);
+
+  --rlc-button-label-text-transform: uppercase;
+  --rlc-button-content-padding: 0rem var(--rls-sizing-x4);
+  --rlc-button-content-radius: var(--rls-sizing-x2);
+
+  --rlc-card-content-padding: var(--rls-sizing-x8);
+
+  --rlc-datatable-letter-spacing: 0.0625em;
+  --rlc-datatable-font-size: 7rem;
+  --rlc-datatable-width-scroll: var(--rls-sizing-x4);
+  --rlc-datatable-padding-scroll: 0rem;
+
+  --rlc-form-footer-justify-content: end;
+
+  --rlc-icon-font-size: var(--rls-sizing-x12);
+  --rlc-icon-width: var(--rls-sizing-x12);
+  --rlc-icon-height: var(--rls-sizing-x12);
+  --rlc-icon-color: inherit;
+
+  --rlc-input-font-color: var(--rls-app-color-500);
+  --rls-input-font-size: var(--rls-input-font-size);
+  --rlc-input-text-align: left;
+  --rls-input-letter-spacing: var(--rls-input-letter-spacing);
+  --rlc-input-height: var(--rls-sizing-x12);
+  --rlc-input-parent-padding: 0rem;
+
+  --rlc-poster-height: var(--rls-sizing-x18);
+  --rlc-poster-padding: var(--rls-sizing-x4);
   
-  --rls-progress-circular-dimension: var(--sizing-x28);
+  --rlc-progress-circular-dimension: var(--rls-sizing-x28);
 
-  --rls-snackbar-left: 50%;
+  --rlc-snackbar-left: 50%;
 
-  --rls-switch-element-size: var(--sizing-x12);
-  --rls-switch-bar-radius: var(--sizing-x3);
-  --rls-switch-bar-height: var(--sizing-x6);
+  --rlc-switch-element-size: var(--rls-sizing-x12);
+  --rlc-switch-bar-radius: var(--rls-sizing-x3);
+  --rlc-switch-bar-height: var(--rls-sizing-x6);
 
-  --rls-tabulartext-char-width: 5rem;
-  --rls-tabulartext-pointer-width: 2rem;
+  --rlc-tabulartext-char-width: 5rem;
+  --rlc-tabulartext-pointer-width: 2rem;
 
-  --rls-toolbar-height: var(--sizing-x28);
+  --rlc-toolbar-height: var(--rls-sizing-x28);
 }
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--color-rolster-300) var(--background-theme-100);
+  scrollbar-color: var(--rls-theme-color-300) var(--rls-app-background-100);
 }
 
 @import 'components/app';

package/scss/_rolster-foundations.scss

@@ -1,14 +1,14 @@
 // Rolster Technology Foundations
-// v1.0.1
+// v2.0.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 03/Mar/2022
-// Updated: 03/Oct/2023
+// Updated: 26/May/2023
 
-@import 'foundations/animations-foundations';
-@import 'foundations/colors-foundations';
-@import 'foundations/sizings-foundations';
-@import 'foundations/responsives-foundations';
-@import 'foundations/elevations-foundations';
-@import 'foundations/themes-foundations';
-@import 'foundations/typographics-foundations';
+@import 'foundations/animations.foundation';
+@import 'foundations/colors.foundation';
+@import 'foundations/sizings.foundation';
+@import 'foundations/responsives.foundation';
+@import 'foundations/elevations.foundation';
+@import 'foundations/themes.foundation';
+@import 'foundations/typographics.foundation';

package/scss/_rolster-styles.scss

@@ -1,10 +1,23 @@
 // Rolster Technology Styles
-// v1.0.0
+// v2.0.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 11/Ago/2022
-// Updated: 13/Abr/2023
+// Updated: 27/May/2024
 
 @import 'rolster-foundations';
 @import 'rolster-utilities';
 @import 'rolster-components';
+
+.rls-aspect-ratio {
+  --rls-app-font-size-1360: 2.5px;
+  --rls-app-font-size-1820: 2.925px;
+
+  @media screen and (min-width: 1360px) {
+    --rls-app-font-size: var(--rls-app-font-size-1360);
+  }
+
+  @media screen and (min-width: 1820px) {
+    --rls-app-font-size: var(--rls-app-font-size-1820);
+  }
+}

package/scss/_rolster-utilities.scss

@@ -1,14 +1,14 @@
 // Rolster Technology Utilities
-// v1.0.1
+// v2.0.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 13/Abr/2023
-// Updated: 23/Sep/2023
+// Updated: 26/May/2023
 
-@import 'utilities/normalize-utilities';
-@import 'utilities/colors-utilities';
-@import 'utilities/layout-utilities';
-@import 'utilities/themes-utilities';
-@import 'utilities/texts-utilities';
-@import 'utilities/typographics-utilities';
-@import 'utilities/helpers-utilities';
+@import 'utilities/normalize.utility';
+@import 'utilities/colors.utility';
+@import 'utilities/layout.utility';
+@import 'utilities/themes.utility';
+@import 'utilities/texts.utility';
+@import 'utilities/typographics.utility';
+@import 'utilities/helpers.utility';

package/scss/components/_app.scss

@@ -1,9 +1,9 @@
 // Rolster Technology App Component
-// v1.1.0
+// v2.0.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 27/Ene/2024
+// Updated: 26/May/2024
 
 .rls-app {
   &__body {
@@ -16,26 +16,26 @@
     margin: 0rem;
     width: 100%;
     height: 100%;
-    z-index: var(--z-index-8);
+    z-index: var(--rls-z-index-8);
     overflow: hidden;
     transition:
-      left 240ms 0ms var(--standard-curve),
-      width 240ms 0ms var(--standard-curve);
+      left 240ms 0ms var(--rls-standard-curve),
+      width 240ms 0ms var(--rls-standard-curve);
   }
 
   &__header {
-    --rls-toolbar-height: 100%;
+    --rlc-toolbar-height: 100%;
 
     position: relative;
     width: 100%;
-    height: var(--sizing-x28);
+    height: var(--rls-sizing-x28);
     box-sizing: border-box;
-    z-index: var(--z-index-8);
-    background: var(--background-theme-100);
+    z-index: var(--rls-z-index-8);
+    background: var(--rls-app-background-100);
 
     & + .rls-app__page,
     & + .rls-app__content {
-      height: calc(100vh - var(--sizing-x28));
+      height: calc(100vh - var(--rls-sizing-x28));
     }
   }
 
@@ -67,11 +67,11 @@
       padding: 0rem;
       overflow: auto;
       box-sizing: border-box;
-      border-radius: 0rem 0rem var(--sizing-x16) 0rem;
-      background: var(--background-theme-100);
+      border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
+      background: var(--rls-app-background-100);
 
       & + .rls-app__page__content {
-        --rls-snackbar-left: calc(50% + 80rem);
+        --rlc-snackbar-left: calc(50% + 80rem);
 
         width: calc(100% - 160rem);
       }
@@ -91,13 +91,13 @@
 }
 
 .rls-divider {
-  height: var(--sizing-x1);
+  height: var(--rls-sizing-x1);
   background-image: linear-gradient(
     to right,
-    var(--border-theme-100) 50%,
+    var(--rls-app-border-100) 50%,
     rgba(255, 255, 255, 0) 0%
   );
   background-position: bottom;
-  background-size: var(--sizing-x4);
+  background-size: var(--rls-sizing-x4);
   background-repeat: repeat-x;
 }

package/scss/components/_box-field.scss

@@ -1,39 +1,38 @@
 // Rolster Technology BoxField Component
-// v1.1.4
+// v2.0.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 27/Ene/2024
+// Updated: 26/May/2024
 
 .rls-box-field {
-  --pvt-body-background: rgba(248, 248, 248, 1);
-  --pvt-body-opacity: 1;
   --pvt-label-opacity: 1;
+  --pvt-body-opacity: 1;
 
   position: relative;
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-x2);
+  row-gap: var(--rls-sizing-x2);
   width: 100%;
   box-sizing: border-box;
-  transition: height 160ms 0ms var(--standard-curve);
+  transition: height 160ms 0ms var(--rls-standard-curve);
 
   &--focused {
-    --rls-boxfield-body-border: var(--border-1-rolster-500);
-    --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
-    --rls-boxfield-label-font-color: var(--color-rolster-500);
-
-    --pvt-body-background: var(--background-theme-500);
+    --rlc-boxfield-body-background: var(--rls-app-background-500);
+    --rlc-boxfield-body-border: var(--rls-theme-border-1-500);
+    --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
+    --rlc-boxfield-label-font-color: var(--rls-theme-color-500);
   }
 
   &--error {
-    --rls-boxfield-body-border: var(--border-1) solid var(--color-danger-500);
-    --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500);
-    --rls-boxfield-label-font-color: var(--color-danger-500);
+    --rlc-boxfield-body-border: var(--rls-border-1) solid
+      var(--rls-danger-color-500);
+    --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500);
+    --rlc-boxfield-label-font-color: var(--rls-danger-color-500);
   }
 
   &--disabled {
-    --pvt-body-background: var(--background-theme-500);
+    --rlc-boxfield-body-background: var(--rls-app-background-500);
     --pvt-body-opacity: 0.75;
     --pvt-label-opacity: 0.5;
   }
@@ -43,19 +42,19 @@
     width: 100%;
     padding: 0rem 5rem;
     box-sizing: border-box;
-    color: var(--rls-boxfield-label-font-color);
+    color: var(--rlc-boxfield-label-font-color);
     opacity: var(--pvt-label-opacity);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    font-weight: var(--font-weight-medium);
-    font-size: var(--smalltext-font-size);
-    letter-spacing: var(--smalltext-letter-spacing);
-    min-height: var(--smalltext-line-height);
-    line-height: var(--smalltext-line-height);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--rls-smalltext-font-size);
+    letter-spacing: var(--rls-smalltext-letter-spacing);
+    min-height: var(--rls-smalltext-line-height);
+    line-height: var(--rls-smalltext-line-height);
 
     span {
-      color: var(--color-danger-500);
+      color: var(--rls-danger-color-500);
     }
   }
 
@@ -64,30 +63,30 @@
     box-sizing: border-box;
     overflow: hidden;
     opacity: var(--pvt-body-opacity);
-    border-radius: var(--sizing-x2);
-    background: var(--pvt-body-background);
-    padding: var(--rls-boxfield-body-padding);
-    border: var(--rls-boxfield-body-border);
-    box-shadow: var(--rls-boxfield-body-shadow);
+    border-radius: var(--rls-sizing-x2);
+    background: var(--rlc-boxfield-body-background);
+    padding: var(--rlc-boxfield-body-padding);
+    border: var(--rlc-boxfield-body-border);
+    box-shadow: var(--rlc-boxfield-body-shadow);
   }
 
   &__helper {
-    color: var(--color-theme-100);
+    color: var(--rls-app-color-100);
     padding: 0rem 5rem;
     box-sizing: border-box;
-    font-weight: var(--font-weight-medium);
-    font-size: var(--overline-font-size);
-    letter-spacing: var(--overline-letter-spacing);
-    min-height: var(--overline-line-height);
-    line-height: var(--overline-line-height);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--rls-overline-font-size);
+    letter-spacing: var(--rls-overline-letter-spacing);
+    min-height: var(--rls-overline-line-height);
+    line-height: var(--rls-overline-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   &__error {
-    padding: 0rem var(--sizing-x4);
+    padding: 0rem var(--rls-sizing-x4);
     box-sizing: border-box;
-    margin-top: var(--sizing-x1);
+    margin-top: var(--rls-sizing-x1);
   }
 }