@rolster/styles-foundations 2.7.3 → 3.0.0

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

@@ -0,0 +1,100 @@
+// Rolster Technology AreaText Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 17/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);
+    padding: 0rem;
+    cursor: text;
+    border: none;
+    outline: none;
+    background: transparent;
+    resize: none;
+    overflow: hidden;
+    color: var(--pvt-component-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);
+
+    &::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-bordered/atoms/avatar.scss

@@ -0,0 +1,50 @@
+// Rolster Technology Avatar Component
+// v1.1.6
+// @license MIT
+// Author: Rolster Developers
+// Created: 15/Ago/2022
+// Updated: 24/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-x4));
+  font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
+  color: var(--rlc-avatar-color, var(--rls-theme-color-050));
+  background: var(--rlc-avatar-background, var(--rls-theme-gradient-500));
+  overflow: hidden;
+
+  &--skeleton {
+    background: var(--rls-theme-color-200);
+
+    & > * {
+      display: none;
+    }
+  }
+
+  &--rounded {
+    border-radius: 50%;
+  }
+
+  &--contrasted {
+    color: var(--rlc-avatar-color, var(--rls-theme-color-500));
+    background: var(--rlc-avatar-background, var(--rls-theme-color-100));
+  }
+
+  & > span {
+    font-size: inherit;
+  }
+
+  & > img {
+    width: 100%;
+    object-fit: cover;
+  }
+}

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

@@ -0,0 +1,51 @@
+// Rolster Technology Badge Component
+// v1.2.7
+// @license MIT
+// Author: Rolster Developers
+// Created: 13/Abr/2024
+// Updated: 04/Feb/2026
+
+.rls-badge {
+  --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
+  --pvt-font-color: var(--rls-app-color-050);
+  --pvt-background: var(--rls-app-color-700);
+  --pvt-contrasted-font-color: var(--rls-app-color-600);
+  --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-smalltext-font-size));
+  font-weight: var(--rlc-badge-font-weight, var(--rls-font-weight-regular));
+  text-align: center;
+  letter-spacing: var(
+    --rlc-badge-letter-spacing,
+    var(--rls-smalltext-letter-spacing)
+  );
+  color: var(--pvt-font-color);
+  background: var(--pvt-background);
+  border-radius: var(--rlc-badge-radius, calc(var(--pvt-dimension) / 2));
+
+  &--contrasted {
+    color: var(--pvt-contrasted-font-color);
+    background: var(--pvt-contrasted-background);
+  }
+
+  &[rls-theme] {
+    --pvt-font-color: var(--rls-theme-color-050);
+    --pvt-background: var(--rls-theme-color-500);
+    --pvt-contrasted-font-color: var(--rls-theme-color-700);
+    --pvt-contrasted-background: var(--rls-theme-color-100);
+  }
+
+  & > span {
+    font-size: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+  }
+}

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

@@ -0,0 +1,87 @@
+// Rolster Technology Breadcrumb Component
+// v1.1.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// 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-bordered/atoms/button-action.scss

@@ -0,0 +1,124 @@
+// Rolster Technology ButtonAction Component
+// v1.1.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 14/Feb/2025
+
+.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);
+  }
+}

package/scss/design-system-bordered/atoms/button-option.scss

@@ -0,0 +1,49 @@
+// Rolster Technology ButtonOption Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 04/Dic/2025
+// Updated: 04/Dic/2025
+
+.rls-button-option {
+  --pvt-span-color: var(--rls-app-color-800);
+  --pvt-background-hover: var(--rls-theme-color-100);
+  --rlc-icon-color: var(--rls-app-color-600);
+
+  display: flex;
+  width: var(--rlc-button-option, auto);
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x3);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x3);
+  box-sizing: border-box;
+  outline: none;
+  background: transparent;
+  border: var(--rls-app-border-1-300);
+  border-radius: var(--rls-sizing-x4);
+  overflow: hidden;
+
+  &:not(:disabled):hover {
+    background: var(--pvt-background-hover);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &--checked {
+    --pvt-background-hover: var(--rls-theme-color-800);
+    --pvt-span-color: var(--rls-theme-color-050);
+    --rlc-icon-color: var(--rls-theme-color-050);
+
+    background: var(--rls-theme-gradient-500);
+    border: var(--rls-theme-border-1-500);
+  }
+
+  & > span {
+    font-size: var(--rls-span-font-size);
+    letter-spacing: var(--rls-span-letter-spacing);
+    color: var(--pvt-span-color);
+    font-weight: var(--rls-font-weight-medium);
+  }
+}

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

@@ -0,0 +1,249 @@
+// Rolster Technology Button Component
+// v2.4.6
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 28/Abr/2026
+
+.rls-button {
+  --pvt-button-content-background: none;
+  --pvt-button-content-border: none;
+  --pvt-button-content-box-shadow: var(--rlc-button-content-box-shadow, none);
+  --pvt-button-content-font-color: var(--rls-theme-color-500);
+  --pvt-button-content-animation: none;
+  --pvt-button-content-visibility: hidden;
+  --pvt-button-ripple-background: var(--rls-theme-color-700);
+
+  --pvt-ghost-background: none;
+  --pvt-ghost-font-color: var(--rls-theme-color-500);
+  --pvt-ghost-border: none;
+
+  --pvt-outline-background: var(--rls-app-color-050);
+  --pvt-outline-font-color: var(--rls-app-color-500);
+  --pvt-outline-border: var(--rls-app-border-1-300);
+
+  --pvt-flat-background: var(--rls-theme-color-100);
+  --pvt-flat-font-color: var(--rls-theme-color-500);
+  --pvt-flat-border: none;
+
+  --pvt-stroked-background: var(--rls-app-color-050);
+  --pvt-stroked-font-color: var(--rls-theme-color-500);
+  --pvt-stroked-border: var(--rls-theme-border-1-300);
+
+  --pvt-classic-background: var(--rls-theme-color-050);
+  --pvt-classic-font-color: var(--rls-theme-color-500);
+  --pvt-classic-border: var(--rls-theme-border-1-300);
+
+  --pvt-raised-background: var(--rls-theme-color-500);
+  --pvt-raised-font-color: var(--rls-theme-color-050);
+  --pvt-raised-border: none;
+
+  --pvt-gradient-background: var(--rls-theme-gradient-500);
+  --pvt-gradient-font-color: var(--rls-theme-color-050);
+  --pvt-gradient-border: none;
+
+  position: relative;
+  padding: 0rem;
+  width: var(--rlc-button-width, auto);
+  outline: none;
+  background: transparent;
+
+  &:not(:disabled):not(:active) {
+    --pvt-button-content-animation: ripple-squarecenter 1000ms
+      var(--rls-standard-curve);
+  }
+
+  &:not(:disabled):focus {
+    --pvt-button-content-visibility: visible;
+  }
+
+  &:not(:disabled):hover {
+    --pvt-ghost-background: var(--rls-theme-color-200);
+    --pvt-ghost-font-color: var(--rls-theme-font-100);
+    --pvt-ghost-border: none;
+
+    --pvt-outline-background: transparent;
+    --pvt-outline-font-color: var(--rls-theme-color-500);
+    --pvt-outline-border: var(--rls-theme-border-1-500);
+
+    --pvt-stroked-background: var(--rls-theme-color-100);
+    --pvt-stroked-font-color: var(--rls-theme-color-700);
+    --pvt-stroked-border: var(--rls-theme-border-1-700);
+
+    --pvt-classic-background: var(--rls-theme-color-100);
+    --pvt-classic-font-color: var(--rls-theme-color-700);
+    --pvt-classic-border: var(--rls-theme-border-1-700);
+
+    --pvt-flat-background: var(--rls-theme-color-200);
+    --pvt-flat-font-color: var(--rls-theme-color-700);
+    --pvt-flat-border: none;
+
+    --pvt-raised-background: var(--rls-theme-color-700);
+    --pvt-raised-font-color: var(--rls-theme-font-900);
+    --pvt-raised-border: none;
+
+    --pvt-gradient-background: var(--rls-theme-color-700);
+    --pvt-gradient-font-color: var(--rls-theme-font-900);
+    --pvt-gradient-border: none;
+  }
+
+  &:disabled {
+    --pvt-button-content-box-shadow: none;
+
+    --pvt-ghost-background: transparent;
+    --pvt-ghost-font-color: var(--rls-app-color-400);
+    --pvt-ghost-border: none;
+
+    --pvt-outline-background: transparent;
+    --pvt-outline-font-color: var(--rls-app-color-400);
+    --pvt-outline-border: var(--rls-app-border-1-300);
+
+    --pvt-stroked-background: transparent;
+    --pvt-stroked-font-color: var(--rls-app-color-400);
+    --pvt-stroked-border: var(--rls-app-border-1-300);
+
+    --pvt-classic-background: var(--rls-app-color-100);
+    --pvt-classic-font-color: var(--rls-app-color-400);
+    --pvt-classic-border: var(--rls-app-border-1-300);
+
+    --pvt-flat-background: var(--rls-app-color-100);
+    --pvt-flat-font-color: var(--rls-app-color-400);
+    --pvt-flat-border: none;
+
+    --pvt-raised-background: var(--rls-app-color-100);
+    --pvt-raised-font-color: var(--rls-app-color-400);
+    --pvt-raised-border: none;
+
+    --pvt-gradient-background: var(--rls-app-color-100);
+    --pvt-gradient-font-color: var(--rls-app-color-400);
+    --pvt-gradient-border: none;
+
+    pointer-events: none;
+  }
+
+  &__content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    column-gap: var(--rlc-button-content-gap, var(--rls-sizing-x2));
+    line-height: var(--rls-sizing-x20);
+    height: var(--rls-sizing-x20);
+    padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
+    box-sizing: border-box;
+    border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x4));
+    box-shadow: var(--pvt-button-content-box-shadow);
+    color: var(--pvt-button-content-font-color);
+    border: var(--pvt-button-content-border);
+    background: var(--pvt-button-content-background);
+    pointer-events: none;
+
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      top: 50%;
+      left: 50%;
+      padding-top: calc(100% - var(--rls-sizing-x8));
+      padding-left: calc(100% - var(--rls-sizing-x8));
+      margin-top: calc(-50% + var(--rls-sizing-x4));
+      margin-left: calc(-50% + var(--rls-sizing-x4));
+      border-radius: 50%;
+      opacity: 0.26;
+      transform: scale(0);
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-button-ripple-background);
+      animation: var(--pvt-button-content-animation);
+      visibility: var(--pvt-button-content-visibility);
+    }
+
+    &--ghost {
+      --rlc-spinner-color: var(--pvt-ghost-font-color);
+      --pvt-button-content-font-color: var(--pvt-ghost-font-color);
+      --pvt-button-content-background: var(--pvt-ghost-background);
+      --pvt-button-content-border: var(--pvt-ghost-border);
+    }
+
+    &--outline {
+      --rlc-spinner-color: var(--pvt-outline-font-color);
+      --pvt-button-content-font-color: var(--pvt-outline-font-color);
+      --pvt-button-content-background: var(--pvt-outline-background);
+      --pvt-button-content-border: var(--pvt-outline-border);
+    }
+
+    &--stroked {
+      --rlc-spinner-color: var(--pvt-stroked-font-color);
+      --pvt-button-content-font-color: var(--pvt-stroked-font-color);
+      --pvt-button-content-background: var(--pvt-stroked-background);
+      --pvt-button-content-border: var(--pvt-stroked-border);
+    }
+
+    &--classic {
+      --rlc-spinner-color: var(--pvt-classic-font-color);
+      --pvt-button-content-font-color: var(--pvt-classic-font-color);
+      --pvt-button-content-background: var(--pvt-classic-background);
+      --pvt-button-content-border: var(--pvt-classic-border);
+      --pvt-button-ripple-background: var(--rls-theme-font-100);
+    }
+
+    &--flat {
+      --rlc-spinner-color: var(--pvt-flat-font-color);
+      --pvt-button-content-font-color: var(--pvt-flat-font-color);
+      --pvt-button-content-background: var(--pvt-flat-background);
+      --pvt-button-content-border: var(--pvt-flat-border);
+      --pvt-button-ripple-background: var(--rls-theme-font-100);
+    }
+
+    &--raised {
+      --rlc-spinner-color: var(--pvt-raised-font-color);
+      --pvt-button-content-font-color: var(--pvt-raised-font-color);
+      --pvt-button-content-background: var(--pvt-raised-background);
+      --pvt-button-content-border: var(--pvt-raised-border);
+      --pvt-button-ripple-background: var(--rls-theme-font-900);
+    }
+
+    &--gradient {
+      --rlc-spinner-color: var(--pvt-gradient-font-color);
+      --pvt-button-content-font-color: var(--pvt-gradient-font-color);
+      --pvt-button-content-background: var(--pvt-gradient-background);
+      --pvt-button-content-border: var(--pvt-gradient-border);
+      --pvt-button-ripple-background: var(--rls-theme-font-900);
+    }
+  }
+
+  &__description {
+    display: flex;
+    width: auto;
+    align-items: center;
+    column-gap: var(--rlc-button-description-gap, var(--rls-sizing-x2));
+    padding: 0rem var(--rls-sizing-x2);
+    line-height: initial;
+    font-size: var(--rls-button-font-size);
+    letter-spacing: var(--rls-button-letter-spacing);
+    font-weight: var(--rlc-button-font-weight, var(--rls-font-weight-medium));
+    text-transform: var(--rlc-button-label-text-transform, uppercase);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+}
+
+@keyframes ripple-squarecenter {
+  0% {
+    transform: scale(0);
+  }
+
+  20% {
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}