@rolster/styles-foundations 2.7.3 → 3.0.1

package/scss/design-system-filled/molecules/slider.scss

@@ -0,0 +1,74 @@
+// Rolster Technology Slider Component
+// v2.0.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-slider {
+  --pvt-track-height: var(--rls-sizing-x3);
+  --pvt-thumb-background: var(--rls-theme-color-600);
+  --pvt-thumb-color: var(--rls-theme-color-050);
+
+  &--empty {
+    --pvt-thumb-background: var(--rls-app-color-300);
+    --pvt-thumb-color: var(--rls-app-color-900);
+  }
+
+  &__component {
+    position: relative;
+    width: calc(100% - var(--rls-sizing-x10));
+    margin: 0rem 5rem;
+    padding: var(--rls-sizing-x4) 0rem;
+    box-sizing: border-box;
+  }
+
+  &__body {
+    display: flex;
+    column-gap: var(--rls-sizing-x4);
+    align-items: center;
+
+    .rls-icon {
+      padding: var(--rls-sizing-x4);
+      border-radius: 50%;
+      background: var(--rls-app-color-300);
+    }
+  }
+
+  &__track {
+    position: relative;
+    width: 100%;
+    height: var(--pvt-track-height);
+    cursor: pointer;
+    background: var(--rls-app-color-300);
+
+    &__on {
+      position: absolute;
+      width: 0%;
+      height: var(--pvt-track-height);
+      overflow: hidden;
+      z-index: var(--rls-z-index-4);
+      transition: width 200ms 0ms var(--rls-standard-curve);
+      background: var(--rls-theme-color-600);
+    }
+  }
+
+  &__thumb {
+    position: absolute;
+    top: 0.5rem;
+    left: 0rem;
+    cursor: pointer;
+    width: var(--rls-sizing-x10);
+    height: var(--rls-sizing-x10);
+    line-height: var(--rls-sizing-x10);
+    text-align: center;
+    font-size: var(--rls-tiny-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    color: var(--pvt-thumb-color);
+    z-index: var(--rls-z-index-4);
+    border-radius: 50%;
+    background: var(--pvt-thumb-background);
+    transform: translateX(-50%);
+    transition: left 200ms 0ms var(--rls-standard-curve);
+  }
+}

package/scss/design-system-filled/molecules/tabs.scss

@@ -0,0 +1,48 @@
+// Rolster Technology Tabs Component
+// v1.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 28/Abr/2026
+
+.rls-tabs {
+  --pvt-background: var(--rls-app-color-200);
+  --pvt-children-font-color: var(--rls-app-color-800);
+
+  display: flex;
+  background: var(--pvt-background);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x4);
+
+  &__children {
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    border-radius: var(--rls-sizing-x4);
+    color: var(--rls-app-color-500);
+    font-size: var(--rls-smalltext-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    letter-spacing: var(--rls-smalltext-letter-spacing);
+    text-align: center;
+    cursor: pointer;
+    transition: all 240ms var(--rls-standard-curve);
+
+    &--active {
+      color: var(--pvt-children-font-color);
+      font-weight: var(--rls-font-weight-bold);
+      background: var(--rls-app-color-050);
+    }
+
+    &--disabled {
+      color: var(--rls-app-color-400);
+      font-weight: var(--rls-font-weight-regular);
+      background: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  &[rls-theme] {
+    --pvt-background: var(--rls-theme-color-100);
+    --pvt-children-font-color: var(--rls-theme-color-700);
+  }
+}

package/scss/design-system-filled/molecules/toolbar.scss

@@ -0,0 +1,53 @@
+// Rolster Technology Toolbar Component
+// v1.1.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: var(--rls-sizing-x6);
+  height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
+
+  & > * {
+    width: auto;
+  }
+
+  &__description {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x2);
+    overflow: hidden;
+
+    & > label {
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__title {
+    color: var(--rls-app-color-900);
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    font-size: var(--rls-body-font-size);
+    letter-spacing: var(--rls-label-letter-spacing);
+    font-weight: var(--rls-font-weight-bold);
+  }
+
+  &__subtitle {
+    color: var(--rls-app-color-600);
+  }
+
+  &__actions {
+    display: flex;
+    box-sizing: border-box;
+    column-gap: var(--rls-sizing-x8);
+    align-items: center;
+  }
+}

package/scss/design-system-filled/organisms/bottom-sheet.scss

@@ -0,0 +1,108 @@
+// Rolster Technology BottomSheet Component
+// v1.0.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-bottom-sheet {
+  --pvt-component-transform: translateY(100%);
+  --pvt-component-height: 0rem;
+  --pvt-component-max-height: 75%;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 320ms;
+
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    bottom: 0px;
+    width: 100%;
+    max-width: 240rem;
+    max-height: var(--pvt-component-max-height);
+    flex-direction: column;
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    z-index: var(--rls-z-index-2);
+    border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
+    background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+      transform var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve),
+      visibility var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve);
+
+    &::before {
+      display: block;
+      content: '';
+      width: var(--rls-sizing-x24);
+      height: var(--rls-sizing-x2);
+      border-radius: var(--rls-sizing-x2);
+      background: var(--rls-app-color-300);
+      margin: var(--rls-sizing-x3) auto;
+    }
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0rem;
+    left: 0rem;
+    right: 0rem;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-1);
+    background: var(
+      --rlc-bottom-sheet-backdrop-color,
+      var(--rls-theme-backdrop-400)
+    );
+    backdrop-filter: var(--rlc-bottom-sheet-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}
+
+@media screen and (max-height: 960px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+
+@media screen and (max-height: 720px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+
+@media screen and (max-height: 560px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
+}

package/scss/design-system-filled/organisms/card.scss

@@ -0,0 +1,27 @@
+// Rolster Technology Card Component
+// v1.2.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-card {
+  --rlc-divider-background: var(--rls-app-color-300);
+  --pvt-background: var(--rls-app-color-050);
+
+  background: var(--pvt-background);
+  border-radius: var(--rls-sizing-x6);
+
+  &[rls-theme] {
+    --rlc-divider-background: var(--rls-theme-color-200);
+    --pvt-background: var(--rls-theme-color-100);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rlc-card-content-gap, var(--rls-sizing-x4));
+    padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
+    box-sizing: border-box;
+  }
+}

package/scss/design-system-filled/organisms/confirmation.scss

@@ -0,0 +1,186 @@
+// Rolster Technology Confirmation Component
+// v1.4.10
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 04/May/2026
+
+.rls-confirmation {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+
+  --pvt-title-font-size: var(--rls-heading6-font-size);
+  --pvt-title-letter-spacing: var(--rls-heading6-letter-spacing);
+  --pvt-title-line-height: var(--rls-heading6-line-height);
+  --pvt-title-text-transform: initial;
+
+  --pvt-subtitle-font-size: var(--rls-body-font-size);
+  --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
+  --pvt-subtitle-line-height: var(--rls-body-line-height);
+  --pvt-subtitle-text-transform: initial;
+
+  --pvt-content-font-size: var(--rls-input-font-size);
+  --pvt-content-letter-spacing: var(--rls-input-letter-spacing);
+  --pvt-content-line-height: var(--rls-input-line-height);
+
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: var(--rls-html-max-width);
+  height: var(--rls-html-max-height);
+  justify-content: center;
+  align-items: center;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0) scale(1);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    width: calc(100% - var(--rls-sizing-x16));
+    max-width: 180rem;
+    height: var(--pvt-component-height);
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x8);
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    padding: var(--rls-sizing-x8) 0rem;
+    box-sizing: border-box;
+    z-index: var(--rls-z-index-4);
+    border-radius: var(--rls-sizing-x4);
+    background: var(--rls-app-color-050);
+    box-shadow: var(--rls-app-shadow-4);
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity 125ms 0ms var(--rls-deceleration-curve),
+      transform 125ms 0ms var(--rls-deceleration-curve),
+      visibility 125ms 0ms var(--rls-deceleration-curve);
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x4);
+    padding: 0rem var(--rls-sizing-x8);
+    box-sizing: border-box;
+  }
+
+  &__title {
+    text-align: center;
+    color: var(--rls-app-color-900);
+    font-weight: var(--rls-font-weight-bold);
+    font-size: var(--pvt-title-font-size);
+    line-height: var(--pvt-title-line-height);
+    letter-spacing: var(--pvt-title-letter-spacing);
+    text-transform: var(--pvt-title-text-transform);
+  }
+
+  &__subtitle {
+    text-align: center;
+    color: var(--rls-theme-color-400);
+    font-weight: var(--rls-font-weight-bold);
+    font-size: var(--pvt-subtitle-font-size);
+    line-height: var(--pvt-subtitle-line-height);
+    letter-spacing: var(--pvt-subtitle-letter-spacing);
+    text-transform: var(--pvt-subtitle-text-transform);
+  }
+
+  &__body {
+    position: relative;
+    width: 100%;
+    padding: 0rem var(--rls-sizing-x8);
+    box-sizing: border-box;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x8);
+
+    & > p {
+      font-weight: var(--rls-font-weight-medium);
+      font-size: var(--pvt-content-font-size);
+      line-height: var(--pvt-content-line-height);
+      letter-spacing: var(--pvt-content-letter-spacing);
+      text-align: center;
+      color: var(--rls-app-color-600);
+    }
+  }
+
+  &__footer {
+    position: relative;
+    width: 100%;
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x12) 0rem
+      var(--rls-sizing-x12);
+    box-sizing: border-box;
+  }
+
+  &__actions {
+    --rlc-button-width: 100%;
+
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: row-reverse;
+    justify-content: center;
+    column-gap: var(--rls-sizing-x8);
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-2);
+    background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
+    backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .rls-confirmation {
+    --pvt-title-font-size: var(--rls-title-font-size);
+    --pvt-title-letter-spacing: var(--rls-title-letter-spacing);
+    --pvt-title-line-height: var(--rls-title-line-height);
+
+    --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
+    --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
+    --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
+
+    --pvt-content-font-size: var(--rls-paragraph-font-size);
+
+    &__header {
+      row-gap: var(--rls-sizing-x2);
+    }
+
+    &__actions {
+      flex-direction: column-reverse;
+      column-gap: 0rem;
+      row-gap: var(--rls-sizing-x4);
+    }
+  }
+}