@rolster/styles-foundations 2.7.3 → 3.0.0

package/scss/design-system-filled/app.scss

@@ -0,0 +1,233 @@
+// Rolster Technology App Component
+// v2.3.11
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// 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);
+    --pvt-navbar-padding: var(--rls-sizing-x8);
+
+    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);
+    background: var(--rls-app-color-100);
+
+    &--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);
+      --pvt-navbar-padding: var(--rls-sizing-x8) var(--rls-sizing-x4);
+    }
+  }
+
+  &__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(
+      --rlc-app-page-toolbar-height,
+      var(--rls-sizing-x32)
+    );
+
+    --pvt-content-padding-top: var(
+      --rlc-app-page-content-padding-top,
+      var(--rls-sizing-x2)
+    );
+
+    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: var(--pvt-navbar-padding);
+      box-sizing: border-box;
+      transition: all 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%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        box-sizing: border-box;
+        border-radius: var(--rls-sizing-x6);
+        background: var(--rls-app-color-950);
+        transition: width 280ms var(--rls-acceleration-curve);
+      }
+
+      &__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-x6);
+        color: var(--rls-app-color-300);
+        background: var(--rls-app-color-800);
+
+        &:hover {
+          color: var(--rls-theme-color-950);
+          background: var(--rls-theme-color-200);
+        }
+
+        & > 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-x8);
+      box-sizing: border-box;
+      z-index: var(--rls-z-index-8);
+      background: var(--rls-app-color-100);
+
+      & + .rls-app__page__content {
+        padding: calc(
+            var(--pvt-toolbar-height) + var(--pvt-content-padding-top)
+          )
+          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;
+    }
+  }
+}
+
+.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-filled/atoms/amount.scss

@@ -0,0 +1,58 @@
+// Rolster Technology Amount Component
+// v1.2.6
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/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;
+  }
+}

package/scss/design-system-filled/atoms/area-text.scss

@@ -0,0 +1,100 @@
+// Rolster Technology AreaText Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 29/Abr/2026
+
+.rls-area-text {
+  --pvt-font-color: var(--rlc-area-text-font-color, var(--rls-app-color-900));
+  --pvt-font-size: var(--rlc-area-text-font-size, var(--rls-input-font-size));
+  --pvt-font-weight: var(
+    --rlc-area-text-font-weight,
+    var(--rls-input-font-weight)
+  );
+
+  --pvt-letter-spacing: var(
+    --rlc-area-text-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+
+  --pvt-line-height: var(--rlc-area-text-line-height, --rls-input-line-height);
+  --pvt-min-height: var(
+    --rlc-area-text-min-height,
+    var(--rls-input-line-height)
+  );
+  --pvt-padding: var(--rlc-area-text-padding, var(--rls-sizing-x3) 0rem);
+  --pvt-text-align: var(--rlc-area-text-text-align, left);
+
+  --pvt-value-font-color: var(--pvt-font-color);
+  --pvt-value-opacity: 1;
+  --pvt-component-font-color: transparent;
+
+  position: relative;
+  width: var(--rlc-area-text-width, 100%);
+
+  &--focused {
+    --pvt-component-font-color: var(--pvt-font-color);
+    --pvt-value-font-color: transparent;
+  }
+
+  &--disabled {
+    --pvt-value-opacity: 0.5;
+  }
+
+  &__component {
+    position: relative;
+    width: 100%;
+    min-height: var(--pvt-min-height);
+    cursor: text;
+    border: none;
+    outline: none;
+    padding: 0rem;
+    background: transparent;
+    resize: none;
+    overflow: hidden;
+    color: var(--pvt-component-font-color);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--pvt-font-size);
+    line-height: var(--pvt-line-height);
+    text-align: var(--pvt-text-align);
+    letter-spacing: var(--pvt-letter-spacing);
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &::selection {
+      background: var(--rls-theme-color-700);
+      color: var(--rls-app-color-050);
+    }
+
+    &:read-only {
+      pointer-events: none;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &__value {
+    position: absolute;
+    top: 0rem;
+    left: 0rem;
+    width: 100%;
+    min-height: var(--pvt-min-height);
+    background: transparent;
+    pointer-events: none;
+    overflow: hidden;
+    white-space: pre-wrap;
+    word-break: break-word;
+    opacity: var(--pvt-value-opacity);
+    color: var(--pvt-value-font-color);
+    font-weight: var(--pvt-font-weight);
+    font-size: var(--pvt-font-size);
+    line-height: var(--pvt-line-height);
+    text-align: var(--pvt-text-align);
+    letter-spacing: var(--pvt-letter-spacing);
+  }
+}

package/scss/design-system-filled/atoms/avatar.scss

@@ -0,0 +1,45 @@
+// Rolster Technology Avatar Component
+// v1.1.5
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-avatar {
+  --rlc-image-width: var(--rlc-avatar-width);
+  --rlc-image-height: var(--rlc-avatar-height);
+
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  width: var(--rlc-avatar-width, var(--rls-sizing-x24));
+  height: var(--rlc-avatar-height, var(--rls-sizing-x24));
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--rlc-avatar-radius, var(--rls-sizing-x6));
+  font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
+  color: var(--rlc-avatar-color, var(--rls-app-color-950));
+  background: var(--rlc-avatar-background, var(--rls-theme-color-200));
+  overflow: hidden;
+
+  &--skeleton {
+    background: var(--rls-theme-color-200);
+
+    & > * {
+      display: none;
+    }
+  }
+
+  &--rounded {
+    border-radius: 50%;
+  }
+
+  & > span {
+    font-size: inherit;
+  }
+
+  & > img {
+    width: 100%;
+    object-fit: cover;
+  }
+}

package/scss/design-system-filled/atoms/badge.scss

@@ -0,0 +1,51 @@
+// Rolster Technology Badge Component
+// v1.2.8
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 27/Abr/2026
+
+.rls-badge {
+  --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
+  --pvt-font-color: var(--rls-app-color-800);
+  --pvt-background: var(--rls-app-color-200);
+  --pvt-contrasted-font-color: var(--rls-app-color-800);
+  --pvt-contrasted-background: var(--rls-app-color-200);
+
+  position: relative;
+  display: inline-block;
+  width: auto;
+  min-width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
+  line-height: var(--pvt-dimension);
+  padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x2));
+  box-sizing: var(--rlc-badge-box-sizing, border-box);
+  font-size: var(--rlc-badge-font-size, var(--rls-caption-font-size));
+  font-weight: var(--rlc-badge-font-weight, var(--rls-caption-font-weight));
+  text-align: center;
+  letter-spacing: var(
+    --rlc-badge-letter-spacing,
+    var(--rls-caption-letter-spacing)
+  );
+  color: var(--pvt-font-color);
+  background: var(--pvt-background);
+  border-radius: var(--rlc-badge-radius, var(--rls-sizing-x2));
+
+  &--contrasted {
+    color: var(--pvt-contrasted-font-color);
+    background: var(--pvt-contrasted-background);
+  }
+
+  &[rls-theme] {
+    --pvt-font-color: var(--rls-theme-color-800);
+    --pvt-background: var(--rls-theme-color-100);
+    --pvt-contrasted-font-color: var(--rls-theme-color-800);
+    --pvt-contrasted-background: var(--rls-theme-color-100);
+  }
+
+  & > span {
+    font-size: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+  }
+}

package/scss/design-system-filled/atoms/breadcrumb.scss

@@ -0,0 +1,87 @@
+// Rolster Technology Breadcrumb Component
+// v1.1.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 04/May/2026
+
+.rls-breadcrumb {
+  --pvt-height: var(--rlc-breadcrumb-height, var(--rls-sizing-x18));
+  --pvt-link-font-color: var(--rls-app-color-600);
+
+  --pvt-label-font-size: var(
+    --rlc-breadcrumb-font-size,
+    var(--rls-body-font-size)
+  );
+
+  --pvt-label-font-weight: var(--rlc-breadcrumb-font-weight, inherit);
+
+  --pvt-label-letter-spacing: var(
+    --rlc-breadcrumb-letter-spacing,
+    var(--rls-body-letter-spacing)
+  );
+
+  display: -webkit-box;
+  width: 100%;
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
+  padding: var(--rlc-breadcrumb-padding, 0rem var(--rls-sizing-x8));
+  box-sizing: border-box;
+  user-select: none;
+  overflow-x: var(--rlc-breadcrumb-overflow-x, auto);
+  overflow-y: hidden;
+  color: var(--rls-app-color-600);
+  font-weight: var(--rls-font-weight-medium);
+
+  &::-webkit-scrollbar {
+    width: 0rem;
+    height: 0rem;
+  }
+
+  &__label {
+    display: block;
+    height: inherit;
+    color: inherit;
+    line-height: inherit;
+    font-weight: var(--pvt-label-font-weight);
+    font-size: var(--pvt-label-font-size);
+    letter-spacing: var(--pvt-label-letter-spacing);
+
+    &:first-child {
+      &::before {
+        display: none;
+      }
+    }
+
+    &::before {
+      font-family: -rolster-icons;
+      display: inline-block;
+      content: '\e911';
+      margin: 0rem var(--rls-sizing-x2);
+      cursor: default;
+      color: inherit;
+      font-size: var(--rls-sizing-x12);
+      font-weight: normal;
+      font-style: normal;
+      letter-spacing: normal;
+      vertical-align: top;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    &__a {
+      display: inline-block;
+
+      &[rls-theme] {
+        color: var(--rls-theme-color-500);
+      }
+
+      &--actionable {
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}

package/scss/design-system-filled/atoms/button-action.scss

@@ -0,0 +1,124 @@
+// Rolster Technology ButtonAction Component
+// v1.1.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-button-action {
+  --pvt-ripple-dimension: var(
+    --rlc-action-ripple-dimension,
+    var(--rls-sizing-x18)
+  );
+
+  --pvt-ripple-position: var(--rlc-action-ripple-position, -9rem);
+
+  --pvt-ripple-color: var(--rlc-action-ripple-color, var(--rls-app-color-600));
+  --pvt-tooltip-transition-delay: 0ms;
+  --pvt-tooltip-opacity: 0;
+
+  position: relative;
+  width: var(--rls-sizing-x16);
+  height: var(--rls-sizing-x16);
+  border: none;
+  outline: none;
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  user-select: none;
+  cursor: default;
+  border-radius: var(--rlc-action-radius, 50%);
+  color: var(--rlc-action-color, var(--rls-app-color-600));
+  background: var(--rlc-action-background, transparent);
+
+  &::before {
+    position: absolute;
+    display: block;
+    content: '';
+    top: 50%;
+    left: 50%;
+    opacity: 0.32;
+    visibility: hidden;
+    border-radius: 50%;
+    transform: scale(0);
+    background: var(--pvt-ripple-color);
+    padding-top: calc(120% - var(--rls-sizing-x4));
+    padding-left: calc(120% - var(--rls-sizing-x4));
+    margin-top: calc(-60% + var(--rls-sizing-x2));
+    margin-left: calc(-60% + var(--rls-sizing-x2));
+  }
+
+  &:not(:active)::before {
+    animation: ripple-button-action 1000ms var(--rls-standard-curve);
+  }
+
+  &:focus::before {
+    visibility: visible;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    opacity: 0.24;
+    width: var(--pvt-ripple-dimension);
+    height: var(--pvt-ripple-dimension);
+    margin-top: var(--pvt-ripple-position);
+    margin-left: var(--pvt-ripple-position);
+    border-radius: 50%;
+    background: var(--pvt-ripple-color);
+    transform: scale(0);
+    transition: transform 160ms 0ms var(--rls-sharp-curve);
+  }
+
+  &:not(:disabled):hover {
+    --pvt-tooltip-opacity: 1;
+    --pvt-tooltip-transition-delay: 480ms;
+
+    &::after {
+      transform: scale(1);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &__content {
+    pointer-events: none;
+  }
+
+  &__tooltip {
+    position: absolute;
+    top: calc(100% + var(--rls-sizing-x6));
+    left: 50%;
+    width: auto;
+    float: initial;
+    padding: var(--rls-sizing-x4);
+    border-radius: var(--rls-sizing-x2);
+    white-space: nowrap;
+    pointer-events: none;
+    transform: translateX(-50%);
+    background: var(--rls-app-color-900);
+    color: var(--rls-app-color-050);
+    transition: opacity 200ms 0ms var(--rls-deceleration-curve);
+    opacity: var(--pvt-tooltip-opacity);
+    transition-delay: var(--pvt-tooltip-transition-delay);
+  }
+}
+
+@keyframes ripple-button-action {
+  0% {
+    transform: scale(0);
+  }
+
+  20% {
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}