@rolster/styles-foundations 3.0.3 → 3.0.5

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

@@ -1,100 +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);
-  }
-}
+// 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

@@ -1,50 +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;
-  }
-}
+// 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

@@ -1,51 +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;
-  }
-}
+// 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

@@ -1,87 +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;
-        }
-      }
-    }
-  }
-}
+// 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;
+        }
+      }
+    }
+  }
+}