@rolster/styles-foundations 2.7.2 → 3.0.0

package/package.json

@@ -1,39 +1,41 @@
-{
-  "name": "@rolster/styles-foundations",
-  "version": "2.7.2",
-  "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
-  "sass": "scss/styles.scss",
-  "style": "dist/styles.css",
-  "author": "Rolster Technology <rolster.developments@gmail.com>",
-  "license": "MIT",
-  "files": [
-    "dist/",
-    "fonts/",
-    "icons/",
-    "scss/"
-  ],
-  "scripts": {
-    "clean": "rimraf ./dist",
-    "sass:build": "sass scss/styles.scss dist/styles.css --style=compressed",
-    "css:prettier": "prettier --write dist/*.css --ignore-path .prettierignore",
-    "css:minify": "css-minify -d dist/ -o dist/",
-    "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"
-  },
-  "devDependencies": {
-    "css-minify": "^2.0.0",
-    "prettier": "^3.1.8",
-    "rimraf": "^6.1.3",
-    "rtlcss": "^4.1.0",
-    "sass": "^1.89.0",
-    "sass-migrator": "^2.2.1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/rolster-developments/styles-foundations"
-  },
-  "engines": {
-    "node": ">=14.13"
-  }
-}
+{
+  "name": "@rolster/styles-foundations",
+  "version": "3.0.0",
+  "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
+  "sass": "scss/styles.scss",
+  "style": "dist/styles.css",
+  "author": "Rolster Technology <rolster.developments@gmail.com>",
+  "license": "MIT",
+  "files": [
+    "dist/",
+    "fonts/",
+    "icons/",
+    "scss/"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "dsbd:build": "sass scss/design-system-bordered/_index.scss dist/design-system-bordered.css --style=compressed",
+    "dsfl:build": "sass scss/design-system-filled/_index.scss dist/design-system-filled.css --style=compressed",
+    "sass:build": "sass scss/styles.scss dist/styles.css --style=compressed",
+    "css:prettier": "prettier --write dist/*.css --ignore-path .prettierignore",
+    "css:minify": "css-minify -d dist/ -o dist/",
+    "rltcss": "rtlcss dist/styles.css dist/styles.rtl.css",
+    "build": "npm run clean && npm run sass:build && npm run dsbd:build && npm run dsfl:build && npm run rltcss && npm run css:prettier && npm run css:minify",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "css-minify": "^2.0.0",
+    "prettier": "^3.1.8",
+    "rimraf": "^6.1.3",
+    "rtlcss": "^4.1.0",
+    "sass": "^1.89.0",
+    "sass-migrator": "^2.2.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rolster-developments/styles-foundations"
+  },
+  "engines": {
+    "node": ">=14.13"
+  }
+}

package/scss/design-system-bordered/_index.scss

@@ -0,0 +1,96 @@
+// Rolster Technology Design System Bordered
+// v2.3.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 13/Abr/2023
+// Updated: 23/Abr/2026
+
+@use 'sass:meta';
+
+.rls-design-system-bordered {
+  @include meta.load-css('app');
+
+  @include meta.load-css('atoms/amount');
+  @include meta.load-css('atoms/area-text');
+  @include meta.load-css('atoms/avatar');
+  @include meta.load-css('atoms/badge');
+  @include meta.load-css('atoms/breadcrumb');
+  @include meta.load-css('atoms/button');
+  @include meta.load-css('atoms/button-action');
+  @include meta.load-css('atoms/button-option');
+  @include meta.load-css('atoms/check-box');
+  @include meta.load-css('atoms/icon');
+  @include meta.load-css('atoms/image');
+  @include meta.load-css('atoms/input');
+  @include meta.load-css('atoms/input-decimal');
+  @include meta.load-css('atoms/input-money');
+  @include meta.load-css('atoms/input-number');
+  @include meta.load-css('atoms/input-password');
+  @include meta.load-css('atoms/input-percentage');
+  @include meta.load-css('atoms/input-search');
+  @include meta.load-css('atoms/input-text');
+  @include meta.load-css('atoms/label');
+  @include meta.load-css('atoms/message-icon');
+  @include meta.load-css('atoms/poster');
+  @include meta.load-css('atoms/progress-bar');
+  @include meta.load-css('atoms/progress-circular');
+  @include meta.load-css('atoms/radio-button');
+  @include meta.load-css('atoms/skeleton');
+  @include meta.load-css('atoms/skeleton-text');
+  @include meta.load-css('atoms/spinner');
+  @include meta.load-css('atoms/switch');
+  @include meta.load-css('atoms/tabular-text');
+
+  @include meta.load-css('molecules/accordion');
+  @include meta.load-css('molecules/alert');
+  @include meta.load-css('molecules/ballot');
+  @include meta.load-css('molecules/button-progress');
+  @include meta.load-css('molecules/button-toggle');
+  @include meta.load-css('molecules/field-area');
+  @include meta.load-css('molecules/field-box');
+  @include meta.load-css('molecules/field-decimal');
+  @include meta.load-css('molecules/field-file');
+  @include meta.load-css('molecules/field-list');
+  @include meta.load-css('molecules/field-list-suggestions');
+  @include meta.load-css('molecules/field-money');
+  @include meta.load-css('molecules/field-number');
+  @include meta.load-css('molecules/field-password');
+  @include meta.load-css('molecules/field-percentage');
+  @include meta.load-css('molecules/field-readonly');
+  @include meta.load-css('molecules/field-text');
+  @include meta.load-css('molecules/label-check-box');
+  @include meta.load-css('molecules/label-radio-button');
+  @include meta.load-css('molecules/label-switch');
+  @include meta.load-css('molecules/message-empty');
+  @include meta.load-css('molecules/pagination');
+  @include meta.load-css('molecules/picker-day');
+  @include meta.load-css('molecules/picker-day-range');
+  @include meta.load-css('molecules/picker-month');
+  @include meta.load-css('molecules/picker-selector-title');
+  @include meta.load-css('molecules/picker-year');
+  @include meta.load-css('molecules/slider');
+  @include meta.load-css('molecules/tabs');
+  @include meta.load-css('molecules/toolbar');
+
+  @include meta.load-css('organisms/bottom-sheet');
+  @include meta.load-css('organisms/card');
+  @include meta.load-css('organisms/confirmation');
+  @include meta.load-css('organisms/data-table');
+  @include meta.load-css('organisms/dropdown');
+  @include meta.load-css('organisms/field-autocomplete');
+  @include meta.load-css('organisms/field-clock');
+  @include meta.load-css('organisms/field-date');
+  @include meta.load-css('organisms/field-date-range');
+  @include meta.load-css('organisms/field-select');
+  @include meta.load-css('organisms/form');
+  @include meta.load-css('organisms/form-navigation');
+  @include meta.load-css('organisms/image-chooser');
+  @include meta.load-css('organisms/image-editor');
+  @include meta.load-css('organisms/image-editor-modal');
+  @include meta.load-css('organisms/modal');
+  @include meta.load-css('organisms/modal-sheet');
+  @include meta.load-css('organisms/picker-clock');
+  @include meta.load-css('organisms/picker-date');
+  @include meta.load-css('organisms/picker-date-range');
+  @include meta.load-css('organisms/snackbar');
+}

package/scss/{components → design-system-bordered}/app.scss

@@ -1,145 +1,228 @@
-// Rolster Technology App Component
-// v2.3.8
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 08/Abr/2026
-
-.rls-app {
-  &__body {
-    --pvt-navbar-dimension: 0rem;
-    --pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
-    --pvt-navbar-width-condense: 36rem;
-    --pvt-navbar-snackbar: var(--pvt-navbar-width);
-
-    display: flex;
-    flex-direction: column;
-    padding: 0rem;
-    margin: 0rem;
-    width: var(--rls-html-max-width);
-    height: var(--rls-html-max-height);
-    overflow: hidden;
-    z-index: var(--rls-z-index-8);
-
-    &--navbar-snackbar {
-      --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-snackbar) / 2));
-    }
-
-    &--navbar-condense {
-      --pvt-navbar-width: var(--pvt-navbar-width-condense);
-      --pvt-nabvar-snackbar: var(--pvt-navbar-width-condense);
-    }
-  }
-
-  &__header {
-    --rlc-toolbar-height: 100%;
-    --pvt-header-height: var(--rlc-app-header-height, var(--rls-sizing-x28));
-
-    position: relative;
-    width: 100%;
-    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-050));
-
-    & + .rls-app__page,
-    & + .rls-app__content {
-      height: calc(var(--rls-html-max-height) - var(--pvt-header-height));
-    }
-  }
-
-  &__content {
-    position: relative;
-    width: 100%;
-    height: var(--rls-html-max-height);
-    margin: 0rem;
-    padding: 0rem;
-    overflow: auto;
-    box-sizing: border-box;
-    background: var(--rlc-app-content-background, var(--rls-app-color-050));
-  }
-
-  &__page {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: var(--rls-html-max-height);
-    margin: 0rem;
-    padding: 0rem;
-    overflow: hidden;
-    box-sizing: border-box;
-
-    &__nav {
-      position: relative;
-      width: var(--pvt-navbar-width);
-      height: 100%;
-      margin: 0rem;
-      padding: 0rem;
-      background: var(--rlc-app-navbar-background, var(--rls-theme-color-200));
-      transition: width 280ms var(--rls-acceleration-curve);
-
-      & + .rls-app__page__content {
-        --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
-
-        width: calc(100% - var(--pvt-navbar-width));
-      }
-
-      &__content {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        background: var(
-          --rlc-app-navbar-content-background,
-          rgba(255, 255, 255, 0.84)
-        );
-        backdrop-filter: blur(2px);
-        overflow-x: hidden;
-        overflow-y: auto;
-        box-sizing: border-box;
-        border-right: var(--rls-app-border-1-200);
-      }
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      margin: 0rem;
-      padding: 0rem;
-      overflow: hidden;
-      box-sizing: border-box;
-      transition: width 240ms var(--rls-acceleration-curve);
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .rls-app {
-    &__body {
-      --pvt-navbar-dimension: 140rem;
-      --pvt-navbar-width: var(--pvt-navbar-dimension);
-      --pvt-navbar-width-condense: var(--pvt-navbar-dimension);
-      --pvt-section-navbar: 0rem;
-      --pvt-navbar-snackbar: 0rem;
-
-      &--navbar-condense {
-        --pvt-section-navbar: var(--pvt-navbar-dimension);
-      }
-    }
-
-    &__page {
-      width: calc(var(--rls-html-max-width) + var(--pvt-navbar-width));
-      left: calc(var(--pvt-section-navbar) * -1);
-      transition: left 280ms var(--rls-standard-curve);
-    }
-  }
-}
-
-@media screen and (max-width: 480px) {
-  .rls-app {
-    &__body {
-      --pvt-navbar-dimension: calc(100vw - 32rem);
-    }
-  }
-}
+// Rolster Technology App Component
+// v2.3.11
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 04/May/2026
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--rls-app-color-500) var(--rls-app-color-200);
+}
+
+.rls-app {
+  &__body {
+    --pvt-navbar-dimension: 0rem;
+    --pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
+    --pvt-navbar-width-condense: 36rem;
+    --pvt-navbar-snackbar: var(--pvt-navbar-width);
+
+    display: flex;
+    flex-direction: column;
+    padding: 0rem;
+    margin: 0rem;
+    width: var(--rls-html-max-width);
+    height: var(--rls-html-max-height);
+    overflow: hidden;
+    z-index: var(--rls-z-index-8);
+
+    &--navbar-snackbar {
+      --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-snackbar) / 2));
+    }
+
+    &--navbar-condense {
+      --pvt-navbar-width: var(--pvt-navbar-width-condense);
+      --pvt-nabvar-snackbar: var(--pvt-navbar-width-condense);
+    }
+  }
+
+  &__header {
+    --rlc-toolbar-height: 100%;
+    --pvt-header-height: var(--rlc-app-header-height, var(--rls-sizing-x28));
+
+    position: relative;
+    width: 100%;
+    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-050));
+
+    & + .rls-app__page,
+    & + .rls-app__content {
+      height: calc(var(--rls-html-max-height) - var(--pvt-header-height));
+    }
+  }
+
+  &__content {
+    position: relative;
+    width: 100%;
+    height: var(--rls-html-max-height);
+    margin: 0rem;
+    padding: 0rem;
+    overflow: auto;
+    box-sizing: border-box;
+    background: var(--rlc-app-content-background, var(--rls-app-color-050));
+  }
+
+  &__page {
+    --pvt-toolbar-height: var(
+      --rls-app-page-toolbar-height,
+      var(--rls-sizing-x32)
+    );
+
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: var(--rls-html-max-height);
+    margin: 0rem;
+    padding: 0rem;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &__nav {
+      position: relative;
+      width: var(--pvt-navbar-width);
+      height: 100%;
+      margin: 0rem;
+      padding: 0rem;
+      background: var(--rlc-app-navbar-background, var(--rls-theme-color-200));
+      transition: width 280ms var(--rls-acceleration-curve);
+
+      & + .rls-app__page__body {
+        --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
+
+        width: calc(100% - var(--pvt-navbar-width));
+      }
+
+      &__content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background: var(
+          --rlc-app-navbar-content-background,
+          rgba(255, 255, 255, 0.84)
+        );
+        backdrop-filter: blur(2px);
+        overflow-x: hidden;
+        overflow-y: auto;
+        box-sizing: border-box;
+        border-right: var(--rls-app-border-1-200);
+      }
+
+      &__menu {
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--rls-sizing-x8);
+      }
+
+      &__option {
+        display: flex;
+        align-items: center;
+        column-gap: var(--rls-sizing-x6);
+        padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
+        cursor: default;
+        border-radius: var(--rls-sizing-x4);
+        color: var(--rls-app-color-700);
+        border: var(--rls-app-border-1-200);
+
+        &:hover {
+          color: var(--rls-app-color-900);
+          background: var(--rls-app-color-100);
+        }
+
+        & > span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    &__body {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      margin: 0rem;
+      padding: 0rem;
+      overflow: hidden;
+      box-sizing: border-box;
+      transition: width 240ms var(--rls-acceleration-curve);
+    }
+
+    &__toolbar {
+      position: absolute;
+      top: 0rem;
+      display: flex;
+      width: 100%;
+      height: var(--pvt-toolbar-height);
+      justify-content: space-between;
+      align-items: center;
+      column-gap: var(--rls-sizing-x8);
+      padding: 0rem var(--rls-sizing-x12);
+      box-sizing: border-box;
+      z-index: var(--rls-z-index-8);
+      background: var(--rls-app-color-050);
+      border-bottom: var(--rls-app-border-1-200);
+
+      & + .rls-app__page__content {
+        padding: calc(var(--pvt-toolbar-height) + var(--rls-sizing-x8))
+          var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
+      }
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      width: calc(100% - var(--rls-sizing-x16));
+      height: 100%;
+      padding: var(--rls-sizing-x8) var(--rls-sizing-x8) 0rem
+        var(--rls-sizing-x8);
+      overflow-y: auto;
+      overflow-x: hidden;
+      background: var(--rls-app-color-050);
+    }
+  }
+}
+
+.rls-divider {
+  height: var(--rlc-divider-height, var(--rls-sizing-x1));
+  background-image: linear-gradient(
+    to right,
+    var(--rlc-divider-background, var(--rls-app-color-300)) 50%,
+    rgba(255, 255, 255, 0) 0%
+  );
+  background-position: bottom;
+  background-size: var(--rlc-divider-size, var(--rls-sizing-x4));
+  background-repeat: repeat-x;
+}
+
+@media screen and (max-width: 640px) {
+  .rls-app {
+    &__body {
+      --pvt-navbar-dimension: 140rem;
+      --pvt-navbar-width: var(--pvt-navbar-dimension);
+      --pvt-navbar-width-condense: var(--pvt-navbar-dimension);
+      --pvt-section-navbar: 0rem;
+      --pvt-navbar-snackbar: 0rem;
+
+      &--navbar-condense {
+        --pvt-section-navbar: var(--pvt-navbar-dimension);
+      }
+    }
+
+    &__page {
+      width: calc(var(--rls-html-max-width) + var(--pvt-navbar-width));
+      left: calc(var(--pvt-section-navbar) * -1);
+      transition: left 280ms var(--rls-standard-curve);
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .rls-app {
+    &__body {
+      --pvt-navbar-dimension: calc(100vw - 32rem);
+    }
+  }
+}

package/scss/design-system-bordered/atoms/amount.scss

@@ -0,0 +1,58 @@
+// Rolster Technology Amount Component
+// v1.2.6
+// @license MIT
+// Author: Rolster Developers
+// Created: 11/Sep/2023
+// Updated: 03/Feb/2026
+
+.rls-amount {
+  --pvt-font-size: var(--rlc-amount-font-size, inherit);
+  --pvt-font-weight: var(--rlc-amount-font-weight, inherit);
+  --pvt-decimal-width: var(--rlc-amount-decimal-width, 0.5);
+  --pvt-decimal-size: var(--rlc-amount-decimal-size, 0.6);
+  --pvt-width-separator: var(--rlc-amount-separator, 1.25);
+
+  --rlc-tabular-text-font-size: var(--pvt-font-size);
+  --rlc-tabular-text-font-weight: var(--pvt-font-weight);
+  --rlc-tabular-text-char-width: calc(
+    var(--pvt-font-size) / var(--pvt-width-separator)
+  );
+
+  display: flex;
+  width: var(--rlc-amount-width, auto);
+  height: var(--rlc-amount-height, auto);
+  justify-content: var(--rlc-amount-text-align, flex-start);
+  align-items: var(--rlc-amount-align-items, initial);
+  column-gap: var(--rls-sizing-x2);
+  font-size: var(--pvt-font-size);
+  font-weight: var(--pvt-font-weight);
+  color: var(--rlc-amount-font-color, inherit);
+
+  &[rls-theme] {
+    color: var(--rls-theme-color-500);
+  }
+
+  &__symbol {
+    display: block;
+    line-height: calc(var(--pvt-font-size) + 1rem);
+    height: calc(var(--pvt-font-size) + 1rem);
+  }
+
+  &__content {
+    display: flex;
+    justify-content: var(--rlc-amount-text-align, flex-start);
+    align-items: var(--rlc-amount-align-items, center);
+  }
+
+  &__decimal {
+    --rlc-tabular-text-char-width: calc(
+      var(--pvt-font-size) * var(--pvt-decimal-width)
+    );
+
+    --rlc-tabular-text-font-size: calc(
+      var(--pvt-font-size) * var(--pvt-decimal-size)
+    );
+
+    align-self: flex-end;
+  }
+}