@rolster/styles-foundations 2.3.8 → 2.3.10

package/dist/styles.css

@@ -0,0 +1,19 @@
+@use 'foundations';
+@use 'utilities';
+@use '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-aspect-ratio {
+    --rls-app-font-size: var(--rls-app-font-size-1360);
+  }
+}
+
+@media screen and (min-width: 1820px) {
+  .rls-aspect-ratio {
+    --rls-app-font-size: var(--rls-app-font-size-1820);
+  }
+}

package/dist/styles.min.css

@@ -0,0 +1 @@
+@use "foundations";@use "utilities";@use "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-aspect-ratio{--rls-app-font-size:var(--rls-app-font-size-1360)}}@media screen and (min-width:1820px){.rls-aspect-ratio{--rls-app-font-size:var(--rls-app-font-size-1820)}}

package/dist/styles.rtl.css

@@ -0,0 +1,19 @@
+@use 'foundations';
+@use 'utilities';
+@use '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-aspect-ratio {
+    --rls-app-font-size: var(--rls-app-font-size-1360);
+  }
+}
+
+@media screen and (min-width: 1820px) {
+  .rls-aspect-ratio {
+    --rls-app-font-size: var(--rls-app-font-size-1820);
+  }
+}

package/dist/styles.rtl.min.css

@@ -0,0 +1 @@
+@use "foundations";@use "utilities";@use "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-aspect-ratio{--rls-app-font-size:var(--rls-app-font-size-1360)}}@media screen and (min-width:1820px){.rls-aspect-ratio{--rls-app-font-size:var(--rls-app-font-size-1820)}}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.3.8",
+  "version": "2.3.10",
   "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
-  "sass": "scss/_rolster-styles.scss",
-  "style": "dist/rolster-styles.css",
+  "sass": "scss/styles.scss",
+  "style": "dist/styles.css",
   "author": "Rolster Technology <rolster.developments@gmail.com>",
   "license": "MIT",
   "files": [
@@ -14,10 +14,10 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist",
-    "sass:build": "node-sass scss/_rolster-styles.scss dist/rolster-styles.css",
+    "sass:build": "node-sass scss/styles.scss dist/styles.css",
     "css:prettier": "prettier --write dist/*.css --ignore-path .prettierignore",
     "css:minify": "css-minify -d dist/ -o dist/",
-    "rltcss": "rtlcss dist/rolster-styles.css dist/rolster-styles.rtl.css",
+    "rltcss": "rtlcss dist/styles.css dist/styles.rtl.css",
     "build": "npm run clean && npm run sass:build && npm run rltcss && npm run css:prettier && npm run css:minify",
     "prepublishOnly": "npm run build"
   },
@@ -26,7 +26,8 @@
     "node-sass": "^9.0.0",
     "prettier": "^3.0.3",
     "rimraf": "^3.0.2",
-    "rtlcss": "^4.1.0"
+    "rtlcss": "^4.1.0",
+    "sass-migrator": "^2.2.1"
   },
   "repository": {
     "type": "git",

package/scss/components/{_data-table.scss → data-table.scss}

@@ -1,9 +1,9 @@
 // Rolster Technology Datatable Component
-// v2.0.5
+// v2.1.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 26/Oct/2024
+// Updated: 27/Oct/2024
 
 @mixin datatable_cell_control() {
   --rlc-avatar-border-radius: var(--rls-sizing-x3);
@@ -14,40 +14,48 @@
   --rlc-action-ripple-dimension: var(--rls-sizing-x16);
   --rlc-action-ripple-position: -8rem;
 
-  --rlc-ballot-padding: 0rem;
-  --rlc-ballot-component-row-gap: 1rem;
-  --rlc-ballot-title-letter-spacing: var(--rls-smalltext-letter-spacing);
-  --rlc-ballot-title-font-size: var(--rls-smalltext-font-size);
-  --rlc-ballot-title-height: var(--rls-smalltext-line-height);
-  --rlc-ballot-subtitle-letter-spacing: var(--rls-overline-letter-spacing);
-  --rlc-ballot-subtitle-font-size: var(--rls-overline-font-size);
-  --rlc-ballot-subtitle-height: var(--rls-overline-line-height);
-
   --rlc-fieldbox-body-background: transparent;
   --rlc-fieldbox-body-border: none;
-  --rlc-fieldbox-body-box-shadow: none;
   --rlc-fieldbox-body-padding: 0rem;
+  --rlc-fieldbox-body-shadow: none;
 
-  --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
-
-  --rlc-switch-element-size: var(--rls-sizing-x10);
   --rlc-switch-bar-radius: var(--rls-sizing-x2);
   --rlc-switch-bar-height: var(--rls-sizing-x4);
+  --rlc-switch-element-size: var(--rls-sizing-x10);
 
   display: flex;
+  justify-content: center;
+  align-items: center;
   width: var(--rls-sizing-x24);
   padding: 0rem;
-
-  & > * {
-    margin: auto;
-  }
 }
 
 .rls-datatable {
+  --pvt-datatable-record-background: var(--rlc-datatable-record-background);
   --pvt-header-padding-right: var(--rlc-datatable-padding-scroll);
 
+  --rlc-amount-font-size: var(--rlc-datatable-font-size);
+  --rlc-amount-width: 100%;
+  --rlc-badge-padding: 0.5rem 1.5rem;
+  --rlc-ballot-padding: 0rem;
+  --rlc-ballot-component-row-gap: var(--rls-sizing-x1);
+  --rlc-ballot-title-letter-spacing: var(--rls-smalltext-letter-spacing);
+  --rlc-ballot-title-font-size: var(--rls-smalltext-font-size);
+  --rlc-ballot-title-height: var(--rls-smalltext-line-height);
+  --rlc-ballot-subtitle-letter-spacing: var(--rls-overline-letter-spacing);
+  --rlc-ballot-subtitle-font-size: var(--rls-overline-font-size);
+  --rlc-ballot-subtitle-height: var(--rls-overline-line-height);
+  --rlc-fieldbox-body-background: transparent;
+  --rlc-fieldbox-padding: 0rem;
+  --rlc-fieldbox-width: 100%;
+  --rlc-fieldbox-error-display: none;
+  --rlc-fieldbox-label-display: none;
   --rlc-input-font-size: var(--rlc-datatable-font-size);
   --rlc-input-letter-spacing: var(--rlc-datatable-letter-spacing);
+  --rlc-poster-font-size: var(--rlc-datatable-font-size);
+  --rlc-poster-height: var(--rls-sizing-x8);
+  --rlc-poster-padding: var(--rls-sizing-x2);
+  --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
 
   position: relative;
   display: flex;
@@ -93,29 +101,26 @@
   &__title {
     position: relative;
     display: flex;
-    text-align: left;
-    overflow: hidden;
-    white-space: nowrap;
     height: var(--rls-sizing-x20);
     line-height: var(--rls-sizing-x20);
     color: var(--rls-app-color-500);
+    font-weight: var(--rlc-datatable-header-font-weight);
     font-size: var(--rlc-datatable-font-size);
     letter-spacing: var(--rlc-datatable-letter-spacing);
-    font-weight: var(--rls-font-weight-bold);
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
 
     &--control {
       @include datatable_cell_control();
     }
 
     & > span {
+      display: block;
       width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
     }
-
-    & > .rls-icon {
-      margin: auto;
-    }
   }
 
   &__tbody {
@@ -124,15 +129,11 @@
     row-gap: var(--rls-sizing-x6);
     padding: 0rem var(--rlc-datatable-padding-scroll);
     box-sizing: border-box;
+    overflow-y: var(--rlc-datatable-body-overflow);
+    max-height: var(--rlc-datatable-body-max-height);
   }
 
-  &__tsummary {
-    padding-left: var(--rlc-datatable-padding-scroll);
-    padding-right: var(--pvt-header-padding-right);
-    box-sizing: border-box;
-  }
-
-  &__data,
+  &__record,
   &__totals {
     position: relative;
     display: flex;
@@ -141,7 +142,7 @@
     box-sizing: border-box;
     border: var(--rls-app-border-1-100);
     border-radius: var(--rls-sizing-x4);
-    background: var(--rlc-datatable-row-background);
+    background: var(--pvt-datatable-record-background);
 
     &--error {
       background: var(--rls-danger-color-100);
@@ -150,19 +151,17 @@
   }
 
   &__cell,
-  &__info {
+  &__data {
     position: relative;
     display: flex;
-    height: var(--rls-sizing-x20);
-    line-height: var(--rls-sizing-x20);
-    text-align: left;
+    align-items: center;
     cursor: default;
-    overflow: hidden;
-    white-space: nowrap;
+    text-align: left;
+    min-height: var(--rls-sizing-x20);
+    font-weight: var(--rls-font-weight-regular);
     color: var(--rlc-input-font-color);
     font-size: var(--rlc-datatable-font-size);
     letter-spacing: var(--rlc-datatable-letter-spacing);
-    font-weight: var(--rls-font-weight-regular);
 
     &--overflow {
       overflow: initial;
@@ -173,84 +172,36 @@
     }
 
     & > span {
+      display: block;
       width: 100%;
+      white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
     }
 
-    .rls-field-box {
-      width: 100%;
-      padding: 0rem;
-
-      &__label {
-        display: none;
-      }
-
-      &__icon {
-        padding: 0rem;
-      }
-
-      &__error {
-        display: none;
-      }
+    & > p {
+      padding: var(--rls-sizing-x2) 0rem;
     }
 
     .rls-field-list {
-      .rls-field-box__body {
-        padding: var(--rls-sizing-x4) 0rem;
-        border: none;
-        box-shadow: none;
-      }
-
-      &__control {
-        font-size: var(--rlc-datatable-font-size);
-        font-weight: var(--rls-font-weight-medium);
-        letter-spacing: var(--rls-body-letter-spacing);
-      }
-
-      &__suggestions {
-        top: var(--rls-sizing-x24);
-
-        &--higher {
-          top: initial;
-          bottom: var(--rls-sizing-x24);
-        }
-      }
-
-      &__action {
-        .rls-icon {
-          font-size: var(--rls-sizing-x10);
-        }
-      }
+      --rlc-fieldbox-body-border: none;
+      --rlc-fieldbox-body-padding: var(--rls-sizing-x4) 0rem;
+      --rlc-fieldbox-body-shadow: none;
+      --rlc-fieldlist-action-dimension: var(--rls-sizing-x10);
+      --rlc-fieldlist-control-font-size: var(--rlc-datatable-font-size);
+      --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
+      --rlc-fieldlist-control-letter-spacing: var(--rls-body-letter-spacing);
+      --rlc-fieldlist-element-padding: var(--rls-sizing-x4);
+      --rlc-fieldlist-suggestions-bottom: var(--rls-sizing-x24);
+      --rlc-fieldlist-suggestions-top: var(--rls-sizing-x24);
     }
 
-    .rls-input {
-      margin: var(--rls-sizing-x4) 0rem;
-    }
-
-    .rls-amount {
-      font-size: var(--rlc-datatable-font-size);
-      width: 100%;
-    }
-
-    .rls-poster {
-      display: flex;
+    .rls-poster,
+    rls-poster {
       width: calc(100% - var(--rls-sizing-x2));
-      margin: var(--rls-sizing-x3) var(--rls-sizing-x2);
-      justify-content: center;
-      align-items: center;
-      line-height: var(--rls-sizing-x14);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      background: var(--rls-theme-color-100);
-      color: var(--rls-theme-color-500);
-    }
-
-    & > .rls-ballot {
-      --rlc-badge-padding: 0.5rem 1.5rem;
-
-      height: var(--rls-sizing-x20);
     }
 
     & > a {
@@ -261,17 +212,21 @@
     }
   }
 
+  &__tsummary {
+    --pvt-datatable-record-background: var(--rls-theme-color-100);
+
+    padding-left: var(--rlc-datatable-padding-scroll);
+    padding-right: var(--pvt-header-padding-right);
+    box-sizing: border-box;
+  }
+
   &__tfooter {
+    --pvt-datatable-record-background: var(--rls-theme-color-100);
+
     position: relative;
     width: 100%;
     overflow: hidden;
     border-radius: 0rem 0rem var(--rls-sizing-x4) var(--rls-sizing-x4);
-    padding-left: var(--rlc-datatable-padding-scroll);
-    padding-right: var(--pvt-header-padding-right);
     box-sizing: border-box;
-
-    tr {
-      background: var(--rlc-datatable-footer-background);
-    }
   }
 }

package/scss/components/{_field-box.scss → field-box.scss}

@@ -1,9 +1,9 @@
 // Rolster Technology FieldBox Component
-// v2.1.1
+// v2.1.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 25/Jun/2024
+// Updated: 27/Oct/2024
 
 .rls-field-box {
   --pvt-label-opacity: 1;
@@ -11,8 +11,9 @@
 
   position: relative;
   display: flex;
+  width: var(--rlc-fieldbox-width);
   flex-direction: column;
-  width: 100%;
+  padding: var(--rlc-fieldbox-padding);
   box-sizing: border-box;
   transition: height 160ms 0ms var(--rls-standard-curve);
 
@@ -38,6 +39,7 @@
 
   &__label {
     position: relative;
+    display: var(--rlc-fieldbox-label-display);
     width: 100%;
     padding: 0rem 5rem;
     box-sizing: border-box;
@@ -60,6 +62,8 @@
 
   &__body {
     display: flex;
+    align-items: center;
+    column-gap: var(--rls-sizing-x2);
     box-sizing: border-box;
     overflow: hidden;
     opacity: var(--pvt-body-opacity);
@@ -85,6 +89,7 @@
   }
 
   &__error {
+    display: var(--rlc-fieldbox-error-display);
     padding: 0rem var(--rls-sizing-x4);
     box-sizing: border-box;
     margin-top: var(--rls-sizing-x2);

package/scss/components/{_field-list.scss → field-list.scss}

@@ -1,9 +1,9 @@
 // Rolster Technology ListField Component
-// v1.3.1
+// v1.3.2
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 23/Oct/2024
+// Updated: 27/Oct/2024
 
 .rls-field-list {
   --pvt-action-font-color: var(--rls-app-color-300);
@@ -32,7 +32,7 @@
 
   &__control {
     position: relative;
-    width: calc(100% - var(--rls-sizing-x14));
+    width: calc(100% - var(--rlc-fieldlist-action-dimension));
     height: var(--rls-sizing-x12);
     line-height: var(--rls-sizing-x12);
     padding: 0rem;
@@ -40,10 +40,10 @@
     border: none;
     outline: none;
     background: transparent;
+    font-weight: var(--rlc-fieldlist-control-font-weight);
+    font-size: var(--rlc-fieldlist-control-font-size);
+    letter-spacing: var(--rlc-fieldlist-control-letter-spacing);
     color: var(--rlc-input-font-color);
-    font-size: var(--rlc-input-font-size);
-    font-weight: var(--rls-font-weight-medium);
-    letter-spacing: var(--rlc-input-letter-spacing);
 
     &::placeholder {
       color: var(--rls-app-color-100);
@@ -57,26 +57,23 @@
     &:disabled {
       opacity: 0.5;
     }
-
-    &__placeholder {
-      position: relative;
-      color: var(--rls-app-color-100);
-    }
   }
 
   &__action {
+    --rlc-icon-dimesion: var(--rlc-fieldlist-action-dimension);
+
     color: var(--pvt-action-font-color);
-    width: var(--rls-sizing-x12);
-    height: var(--rls-sizing-x12);
+    width: var(--rlc-fieldlist-action-dimension);
+    height: var(--rlc-fieldlist-action-dimension);
     padding: 0rem;
-    margin-left: var(--rls-sizing-x2);
     outline: none;
     background: transparent;
   }
 
   &__suggestions {
     position: absolute;
-    top: calc(100% + var(--rls-sizing-x4));
+    top: var(--rlc-fieldlist-suggestions-top);
+    bottom: initial;
     left: 0rem;
     width: 100%;
     height: 0rem;
@@ -100,7 +97,7 @@
       --pvt-list-transform-origin: 0% 100%;
 
       top: initial;
-      bottom: 100%;
+      bottom: var(--rlc-fieldlist-suggestions-bottom);
     }
 
     &__body {
@@ -145,7 +142,7 @@
     box-sizing: border-box;
     outline: none;
     border-radius: var(--rls-sizing-x4);
-    padding: var(--rls-sizing-x2);
+    padding: var(--rlc-fieldlist-element-padding);
     box-sizing: border-box;
 
     &:hover {

package/scss/{_rolster-components.scss → components.scss}

@@ -1,28 +1,32 @@
 // Rolster Technology Components
-// v2.0.6
+// v2.0.7
 // @license MIT
 // Author: Rolster Developers
 // Created: 13/Abr/2023
-// Updated: 26/Oct/2024
+// Updated: 27/Oct/2024
+
+@use 'sass:meta';
 
 :root {
+  --rlc-app-content-background: var(--rls-app-background-500);
   --rlc-app-header-background: var(--rls-app-background-100);
   --rlc-app-header-height: var(--rls-sizing-x28);
   --rlc-app-navbar-background: var(--rls-app-background-100);
   --rlc-app-navbar-width: 160rem;
-  --rlc-app-content-background: var(--rls-app-background-500);
 
   --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-font-size: var(--rls-title-font-size);
   --rlc-avatar-height: var(--rls-sizing-x24);
+  --rlc-avatar-width: var(--rls-sizing-x24);
 
+  --rlc-amount-font-size: inherit;
   --rlc-amount-text-align: start;
+  --rlc-amount-width: auto;
 
   --rlc-badge-padding: var(--rls-sizing-x2);
 
@@ -41,12 +45,6 @@
   --rlc-ballot-subtitle-text-overflow: initial;
   --rlc-ballot-subtitle-white-space: initial;
 
-  --rlc-fieldbox-body-padding: 0rem;
-  --rlc-fieldbox-body-background: rgba(255, 255, 255, 1);
-  --rlc-fieldbox-body-border: var(--rls-app-border-1-100);
-  --rlc-fieldbox-body-shadow: none;
-  --rlc-fieldbox-label-font-color: var(--rls-app-color-300);
-
   --rlc-breadcrumb-height: var(--rls-sizing-x18);
 
   --rlc-button-label-text-transform: uppercase;
@@ -55,26 +53,45 @@
 
   --rlc-card-content-padding: var(--rls-sizing-x8);
 
+  --rlc-datatable-body-max-height: initial;
+  --rlc-datatable-body-overflow: initial;
   --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-datatable-footer-background: var(--rls-theme-color-100);
   --rlc-datatable-header-background: transparent;
-  --rlc-datatable-row-background: rgb(252, 252, 252);
-  --rlc-datatable-footer-background: var(--rls-standard-color-100);
+  --rlc-datatable-header-font-weight: var(--rls-font-weight-semibold);
+  --rlc-datatable-padding-scroll: 0rem;
+  --rlc-datatable-record-background: rgb(252, 252, 252);
+  --rlc-datatable-width-scroll: var(--rls-sizing-x4);
+
+  --rlc-fieldbox-padding: 0rem;
+  --rlc-fieldbox-width: 100%;
+  --rlc-fieldbox-body-background: rgba(255, 255, 255, 1);
+  --rlc-fieldbox-body-border: var(--rls-app-border-1-100);
+  --rlc-fieldbox-body-padding: 0rem;
+  --rlc-fieldbox-body-shadow: none;
+  --rlc-fieldbox-error-display: block;
+  --rlc-fieldbox-label-display: block;
+  --rlc-fieldbox-label-font-color: var(--rls-app-color-300);
+
+  --rlc-fieldlist-action-dimension: var(--rls-sizing-x14);
+  --rlc-fieldlist-control-font-size: var(--rlc-input-font-size);
+  --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
+  --rlc-fieldlist-control-letter-spacing: var(--rlc-input-letter-spacing);
+  --rlc-fieldlist-element-padding: var(--rls-sizing-x2);
+  --rlc-fieldlist-suggestions-bottom: 100%;
+  --rlc-fieldlist-suggestions-top: calc(100% + var(--rls-sizing-x4));
 
   --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-icon-dimesion: var(--rls-sizing-x12);
 
   --rlc-input-font-color: var(--rls-app-color-500);
   --rlc-input-font-size: var(--rls-input-font-size);
-  --rlc-input-text-align: left;
   --rlc-input-letter-spacing: var(--rls-input-letter-spacing);
   --rlc-input-height: var(--rls-sizing-x12);
+  --rlc-input-text-align: left;
 
   --rlc-label-font-size: var(--rls-smalltext-font-size);
   --rlc-label-letter-spacing: var(--rls-smalltext-letter-spacing);
@@ -85,26 +102,26 @@
   --rlc-poster-height: var(--rls-body-line-height);
   --rlc-poster-padding: var(--rls-sizing-x4);
   --rlc-poster-text-align: center;
-  
+
   --rlc-progress-circular-dimension: var(--rls-sizing-x28);
 
   --rlc-snackbar-left: 50%;
 
   --rlc-skeleton-height: inherit;
-  
+
   --rlc-skeleton-text-column-gap: var(--rls-sizing-x4);
   --rlc-skeleton-text-font-size: var(--rls-body-font-size);
   --rlc-skeleton-text-height: var(--rls-body-line-height);
   --rlc-skeleton-text-letter-spacing: var(--rls-body-letter-spacing);
 
-  --rlc-switch-element-size: var(--rls-sizing-x12);
   --rlc-switch-bar-radius: var(--rls-sizing-x3);
   --rlc-switch-bar-height: var(--rls-sizing-x6);
+  --rlc-switch-element-size: var(--rls-sizing-x12);
 
-  --rlc-tabulartext-text-align: flex-start;
-  --rlc-tabulartext-font-size: var(--rls-body-font-size);
   --rlc-tabulartext-char-width: 5.5rem;
+  --rlc-tabulartext-font-size: var(--rls-body-font-size);
   --rlc-tabulartext-pointer-width: 2rem;
+  --rlc-tabulartext-text-align: flex-start;
 
   --rlc-toolbar-height: var(--rls-sizing-x28);
 }
@@ -114,8 +131,8 @@
   scrollbar-color: var(--rls-theme-color-500) var(--rls-app-background-100);
 }
 
-@import 'components/app';
-@import 'components/data-table';
-@import 'components/field-box';
-@import 'components/field-list';
-@import 'components/form';
+@include meta.load-css('components/app');
+@include meta.load-css('components/data-table');
+@include meta.load-css('components/field-box');
+@include meta.load-css('components/field-list');
+@include meta.load-css('components/form');

package/scss/foundations.scss

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

package/scss/{_rolster-styles.scss → styles.scss}

@@ -5,9 +5,9 @@
 // Created: 11/Ago/2022
 // Updated: 05/Jul/2024
 
-@import 'rolster-foundations';
-@import 'rolster-utilities';
-@import 'rolster-components';
+@use 'foundations';
+@use 'utilities';
+@use 'components';
 
 .rls-aspect-ratio {
   --rls-app-font-size-1360: 2.5px;