@rolster/styles-foundations 3.0.4 → 3.0.6

package/scss/design-system-bordered/organisms/snackbar.scss

@@ -1,93 +1,93 @@
-// Rolster Technology Snackbar Component
-// v1.0.9
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 04/Dic/2025
-
-.rls-snackbar {
-  position: fixed;
-  display: flex;
-  left: var(--rlc-snackbar-left, 50%);
-  width: auto;
-  max-width: 240rem;
-  height: auto;
-  bottom: 0rem;
-  column-gap: var(--rls-sizing-x6);
-  padding: var(--rls-sizing-x6);
-  box-sizing: border-box;
-  border-radius: var(--rls-sizing-x6);
-  background: var(--rls-app-color-050);
-  border-left: var(--rls-theme-border-4-400);
-  transform: translate(-50%, calc(100% + var(--rls-sizing-x4)));
-  transition: all 160ms 0ms var(--rls-standard-curve);
-  box-shadow: var(--rls-app-shadow-center-8);
-  z-index: var(--rls-z-index-32);
-
-  &--visible {
-    transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
-  }
-
-  &__avatar {
-    --rlc-icon-color: var(--rls-theme-color-050);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    background: var(--rls-theme-color-500);
-    width: var(--rls-sizing-x18);
-    height: var(--rls-sizing-x18);
-    border-radius: var(--rls-sizing-x4);
-
-    & + .rls-snackbar__component {
-      width: calc(100% - var(--rls-sizing-x18));
-    }
-  }
-
-  &__component {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--rls-sizing-x2);
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    column-gap: var(--rls-sizing-x4);
-
-    & > button {
-      background: transparent;
-      padding: 0rem;
-      cursor: pointer;
-      color: var(--rls-theme-color-700);
-    }
-  }
-
-  &__title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--rls-theme-color-500);
-    font-size: var(--rls-body-font-size);
-    font-weight: var(--rls-font-weight-bold);
-    letter-spacing: var(--rls-body-letter-spacing);
-  }
-
-  &__content {
-    p {
-      line-height: var(--rls-sizing-x10);
-      color: var(--rls-app-color-600);
-      font-size: var(--rls-label-font-size);
-      font-weight: var(--rls-font-weight-medium);
-      letter-spacing: var(--rls-label-letter-spacing);
-    }
-  }
-}
-
-@media only screen and (max-width: 375px) {
-  .rls-snackbar {
-    width: calc(100% - var(--rls-sizing-x12));
-  }
-}
+// Rolster Technology Snackbar Component
+// v1.0.9
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 04/Dic/2025
+
+.rls-snackbar {
+  position: fixed;
+  display: flex;
+  left: var(--rlc-snackbar-left, 50%);
+  width: auto;
+  max-width: 240rem;
+  height: auto;
+  bottom: 0rem;
+  column-gap: var(--rls-sizing-x6);
+  padding: var(--rls-sizing-x6);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x6);
+  background: var(--rls-app-color-050);
+  border-left: var(--rls-theme-border-4-400);
+  transform: translate(-50%, calc(100% + var(--rls-sizing-x4)));
+  transition: all 160ms 0ms var(--rls-standard-curve);
+  box-shadow: var(--rls-app-shadow-center-8);
+  z-index: var(--rls-z-index-32);
+
+  &--visible {
+    transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
+  }
+
+  &__avatar {
+    --rlc-icon-color: var(--rls-theme-color-050);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background: var(--rls-theme-color-500);
+    width: var(--rls-sizing-x18);
+    height: var(--rls-sizing-x18);
+    border-radius: var(--rls-sizing-x4);
+
+    & + .rls-snackbar__component {
+      width: calc(100% - var(--rls-sizing-x18));
+    }
+  }
+
+  &__component {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x2);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: var(--rls-sizing-x4);
+
+    & > button {
+      background: transparent;
+      padding: 0rem;
+      cursor: pointer;
+      color: var(--rls-theme-color-700);
+    }
+  }
+
+  &__title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--rls-theme-color-500);
+    font-size: var(--rls-body-font-size);
+    font-weight: var(--rls-font-weight-bold);
+    letter-spacing: var(--rls-body-letter-spacing);
+  }
+
+  &__content {
+    p {
+      line-height: var(--rls-sizing-x10);
+      color: var(--rls-app-color-600);
+      font-size: var(--rls-label-font-size);
+      font-weight: var(--rls-font-weight-medium);
+      letter-spacing: var(--rls-label-letter-spacing);
+    }
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  .rls-snackbar {
+    width: calc(100% - var(--rls-sizing-x12));
+  }
+}

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

@@ -1,9 +1,9 @@
 // Rolster Technology Image Component
-// v2.0.0
+// v2.0.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 23/Abr/2026
-// Updated: 23/Abr/2026
+// Updated: 14/May/2026
 
 .rls-image {
   --pvt-background: transparent;
@@ -16,6 +16,7 @@
 
   width: var(--pvt-width);
   height: var(--pvt-height);
+  border-radius: var(--rlc-image-radius, 0rem);
   overflow: hidden;
 
   &--complet {

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

@@ -1,31 +1,31 @@
-// Rolster Technology Led Component
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 07/May/2026
-// Updated: 07/May/2026
-
-.rls-led {
-  --pvt-dimension: var(--rlc-led-dimension, var(--rls-sizing-x8));
-  --pvt-background: var(--rls-app-color-050);
-  --pvt-content-background: var(--rls-app-color-600);
-
-  width: auto;
-  background: var(--pvt-background);
-  padding: var(--rlc-led-padding, var(--rls-sizing-x2));
-  border-radius: 50%;
-
-  &::before {
-    display: block;
-    content: '';
-    background: var(--pvt-content-background);
-    width: var(--pvt-dimension);
-    height: var(--pvt-dimension);
-    border-radius: 50%;
-  }
-
-  &[rls-theme] {
-    --pvt-background: var(--rls-theme-color-100);
-    --pvt-content-background: var(--rls-theme-color-600);
-  }
-}
+// Rolster Technology Led Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 07/May/2026
+// Updated: 14/May/2026
+
+.rls-led {
+  --pvt-dimension: var(--rlc-led-dimension, var(--rls-sizing-x10));
+  --pvt-content-background: var(--rls-app-color-500);
+  --pvt-shadow-color: var(--rls-app-color-200);
+  --pvt-shadow-width: var(--rlc-led-shadow-width, var(--rls-sizing-x4));
+
+  width: auto;
+  border-radius: 50%;
+  box-shadow: 0 0 0 var(--pvt-shadow-width) var(--pvt-shadow-color);
+
+  &::before {
+    display: block;
+    content: '';
+    background: var(--pvt-content-background);
+    width: var(--pvt-dimension);
+    height: var(--pvt-dimension);
+    border-radius: 50%;
+  }
+
+  &[rls-theme] {
+    --pvt-content-background: var(--rls-theme-color-600);
+    --pvt-shadow-color: var(--rls-theme-color-100);
+  }
+}

package/scss/design-system-filled/molecules/message-empty.scss

@@ -1,13 +1,12 @@
 // Rolster Technology MessageEmpty Component
-// v1.0.0
+// v1.0.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 02/May/2026
-// Updated: 02/May/2026
+// Updated: 10/May/2026
 
 .rls-message-empty {
   --pvt-logo-size: var(--rlc-message-empty-logo-size, var(--rls-sizing-x32));
-  --pvt-logo-background: var(--rls-app-color-100);
   --pvt-logo-color: var(--rls-app-color-600);
   --pvt-title-font-color: var(--rls-app-color-900);
   --pvt-content-font-color: var(--rls-app-color-500);
@@ -17,37 +16,36 @@
   width: 100%;
   flex-direction: column;
   align-items: var(--rlc-message-empty-align-items, center);
-  row-gap: var(--rls-sizing-x4);
+  row-gap: var(--rls-sizing-x8);
   padding: var(--rlc-message-empty-padding, var(--rls-sizing-x8));
   box-sizing: border-box;
-  text-align: var(--rlc-message-empty-text-align, center);
 
   &__logo {
     --rlc-icon-color: var(--pvt-logo-color);
-    --rlc-icon-font-size: calc(var(--pvt-logo-size) * 0.5);
+    --rlc-icon-font-size: var(--pvt-logo-size);
 
     display: flex;
-    width: var(--pvt-logo-size);
-    height: var(--pvt-logo-size);
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
-    background: var(--pvt-logo-background);
-    overflow: hidden;
-    box-sizing: border-box;
 
     &--emoji {
-      font-size: calc(var(--pvt-logo-size) * 0.7);
-      line-height: 1;
+      font-size: var(--pvt-logo-size);
     }
 
     &--image {
-      width: 100%;
-      height: 100%;
+      width: var(--pvt-logo-size);
+      height: var(--pvt-logo-size);
       object-fit: contain;
     }
   }
 
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-items: var(--rlc-message-empty-align-items, center);
+    row-gap: var(--rls-sizing-x4);
+  }
+
   &__title {
     width: 100%;
     color: var(--pvt-title-font-color);
@@ -58,6 +56,7 @@
     font-weight: var(--rls-font-weight-semibold);
     letter-spacing: var(--rls-subtitle-letter-spacing);
     line-height: var(--rls-subtitle-line-height);
+    text-align: var(--rlc-message-empty-title-align, center);
   }
 
   &__content {
@@ -69,10 +68,10 @@
     );
     letter-spacing: var(--rls-paragraph-letter-spacing);
     line-height: var(--rls-paragraph-line-height);
+    text-align: var(--rlc-message-empty-content-align, center);
   }
 
   &[rls-theme] {
-    --pvt-logo-background: var(--rls-theme-color-100);
     --pvt-logo-color: var(--rls-theme-color-600);
     --pvt-title-font-color: var(--rls-theme-color-900);
     --pvt-content-font-color: var(--rls-theme-color-700);

package/scss/foundations/borders.scss

@@ -1,14 +1,14 @@
-// Rolster Technology Borders Foundations
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 28/Oct/2025
-// Updated: 28/Oct/2025
-
-body {
-  --rls-app-border-1-transparent: var(--rls-border-1) solid transparent;
-
-  --rls-app-border-2-transparent: var(--rls-border-2) solid transparent;
-
-  --rls-app-border-4-transparent: var(--rls-border-4) solid transparent;
-}
+// Rolster Technology Borders Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 28/Oct/2025
+// Updated: 28/Oct/2025
+
+body {
+  --rls-app-border-1-transparent: var(--rls-border-1) solid transparent;
+
+  --rls-app-border-2-transparent: var(--rls-border-2) solid transparent;
+
+  --rls-app-border-4-transparent: var(--rls-border-4) solid transparent;
+}

package/scss/foundations/elevations.scss

@@ -1,130 +1,130 @@
-// Rolster Technology Elevations Foundations
-// v2.1.4
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 09/Abr/2026
-
-body {
-  --rls-app-shadow-color: rgba(169, 169, 175, 0.6);
-
-  --rls-z-index-1: 1;
-
-  --rls-z-index-2: 2;
-
-  --rls-z-index-4: 4;
-
-  --rls-z-index-6: 6;
-
-  --rls-z-index-8: 8;
-
-  --rls-z-index-12: 12;
-
-  --rls-z-index-16: 16;
-
-  --rls-z-index-24: 24;
-
-  --rls-z-index-32: 32;
-
-  --rls-app-shadow-1: 0px 4px 2px -2px rgba(169, 169, 175, 0.02);
-
-  --rls-app-shadow-2: 0px 4px 8px -2px rgba(169, 169, 175, 0.04);
-
-  --rls-app-shadow-3: 0px 2px 4px -2px rgba(169, 169, 175, 0.08);
-
-  --rls-app-shadow-4:
-    0px 4px 8px -6px rgba(169, 169, 175, 0.03),
-    0px 16px 8px -4px rgba(169, 169, 175, 0.03);
-
-  --rls-app-shadow-5: 0px 8px 24px -4px rgba(169, 169, 175, 0.08);
-
-  --rls-app-shadow-6: 0px 8px 24px -4px rgba(169, 169, 175, 0.12);
-
-  --rls-app-shadow-bottom-2: 0px 2px 2px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-4: 0px 4px 4px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-6: 0px 6px 6px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-8: 0px 8px 8px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-16: 0px 16px 16px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-24: 0px 24px 24px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-bottom-32: 0px 32px 32px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-2: 0px -2px 2px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-4: 0px -4px 4px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-6: 0px -6px 6px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-8: 0px -8px 8px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-16: 0px -16px 16px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-24: 0px -24px 24px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-top-32: 0px -32px 32px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-2: 2px 0px 2px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-4: 4px 0px 4px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-6: 6px 0px 6px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-8: 8px 0px 8px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-16: 16px 0px 16px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-24: 24px 0px 24px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-right-32: 32px 0px 32px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-2: -2px 0px 2px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-4: -4px 0px 4px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-6: -6px 0px 6px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-8: -8px 0px 8px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-16: -16px 0px 16px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-24: -24px 0px 24px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-left-32: -32px 0px 32px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-2: 0px 0px 2px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-4: 0px 0px 4px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-6: 0px 0px 6px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-8: 0px 0px 8px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-16: 0px 0px 16px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-24: 0px 0px 24px 0px var(--rls-app-shadow-color);
-
-  --rls-app-shadow-center-32: 0px 0px 32px 0px var(--rls-app-shadow-color);
-}
-
-*[app-theme='dark'] {
-  --rls-app-shadow-color: rgb(98, 111, 155, 0.6);
-
-  --rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
-
-  --rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
-
-  --rls-app-shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
-
-  --rls-app-shadow-4:
-    0px 4px 8px -6px rgba(50, 44, 47, 0.03),
-    0px 16px 8px -4px rgba(50, 44, 47, 0.03);
-
-  --rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
-
-  --rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
-}
+// Rolster Technology Elevations Foundations
+// v2.1.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 09/Abr/2026
+
+body {
+  --rls-app-shadow-color: rgba(169, 169, 175, 0.6);
+
+  --rls-z-index-1: 1;
+
+  --rls-z-index-2: 2;
+
+  --rls-z-index-4: 4;
+
+  --rls-z-index-6: 6;
+
+  --rls-z-index-8: 8;
+
+  --rls-z-index-12: 12;
+
+  --rls-z-index-16: 16;
+
+  --rls-z-index-24: 24;
+
+  --rls-z-index-32: 32;
+
+  --rls-app-shadow-1: 0px 4px 2px -2px rgba(169, 169, 175, 0.02);
+
+  --rls-app-shadow-2: 0px 4px 8px -2px rgba(169, 169, 175, 0.04);
+
+  --rls-app-shadow-3: 0px 2px 4px -2px rgba(169, 169, 175, 0.08);
+
+  --rls-app-shadow-4:
+    0px 4px 8px -6px rgba(169, 169, 175, 0.03),
+    0px 16px 8px -4px rgba(169, 169, 175, 0.03);
+
+  --rls-app-shadow-5: 0px 8px 24px -4px rgba(169, 169, 175, 0.08);
+
+  --rls-app-shadow-6: 0px 8px 24px -4px rgba(169, 169, 175, 0.12);
+
+  --rls-app-shadow-bottom-2: 0px 2px 2px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-4: 0px 4px 4px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-6: 0px 6px 6px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-8: 0px 8px 8px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-16: 0px 16px 16px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-24: 0px 24px 24px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-bottom-32: 0px 32px 32px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-2: 0px -2px 2px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-4: 0px -4px 4px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-6: 0px -6px 6px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-8: 0px -8px 8px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-16: 0px -16px 16px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-24: 0px -24px 24px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-top-32: 0px -32px 32px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-2: 2px 0px 2px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-4: 4px 0px 4px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-6: 6px 0px 6px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-8: 8px 0px 8px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-16: 16px 0px 16px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-24: 24px 0px 24px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-right-32: 32px 0px 32px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-2: -2px 0px 2px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-4: -4px 0px 4px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-6: -6px 0px 6px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-8: -8px 0px 8px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-16: -16px 0px 16px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-24: -24px 0px 24px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-left-32: -32px 0px 32px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-2: 0px 0px 2px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-4: 0px 0px 4px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-6: 0px 0px 6px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-8: 0px 0px 8px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-16: 0px 0px 16px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-24: 0px 0px 24px 0px var(--rls-app-shadow-color);
+
+  --rls-app-shadow-center-32: 0px 0px 32px 0px var(--rls-app-shadow-color);
+}
+
+*[app-theme='dark'] {
+  --rls-app-shadow-color: rgb(98, 111, 155, 0.6);
+
+  --rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
+
+  --rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
+
+  --rls-app-shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
+
+  --rls-app-shadow-4:
+    0px 4px 8px -6px rgba(50, 44, 47, 0.03),
+    0px 16px 8px -4px rgba(50, 44, 47, 0.03);
+
+  --rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
+
+  --rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
+}